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内 容 简 介 


本 书 是 一 本 全 面 介绍 网 页 设计 相关 知识 的 图 书 。 

本 书 从 学 习 网 页 设计 的 基础 知识 入 手 ， 循 序 渐进 地 为 读者 呈现 一 个 个 精彩 实用 的 知识 、 技 巧 。 
本 书 共 分 为 7 章 ， 内 容 分 别 为 网 页 的 基础 知识 ， 网 页 设计 的 五 大 原则 ， 网 页 设计 的 基础 色 ， 网 页 的 
布局 方式 ， 不 同行 业 的 网 页 色彩 搭配 ， 网 页 色彩 的 视觉 印象 ， 网 页 设计 秘笈 。 在 本 书 4-6 章 的 每 章 
后 面 还 特意 安排 了 大 型 的 设计 实例 ， 详 细 地 为 读者 分 析 完 整 的 综合 设计 的 思路 、 扩 展 等 。 并 且 在 多 
个 章节 中 安排 了 案例 解析 、 设 计 技 巧 、 配 色 方 案 、 设 计 欣 赏 、 设 计 实 战 、 设 计 秘笈 等 经 典 模块 ， 在 
丰富 本 书 结构 的 同时 ， 也 增强 了 实用 性 。 

本 书 内 容 丰 富 、 案 例 精彩 、 版 式 设计 新 颖 ， 适 合 网 页 设计 师 、 平 面 设计 师 、 初 级 读者 学 习 使 用 ， 
可 以 作为 大 中 专 院 校 网 页 设计 专业 、 平 面 设计 专业 及 网 页 设计 培训 机 构 的 教材 ， 也 非常 适合 喜爱 网 
页 设计 的 读者 朋友 作为 参考 用 书 。 
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《网 页 配色 设计 手册 》 是 作者 对 自己 多 年 从 
事 网 页 设计 工作 的 一 个 总 结 ， 和 希望 能 成 为 让 读者 
少 走 弯路 、 找 到 设计 捷径 的 经 典 手册 。 书 中 包含 
了 网 页 设计 必 学 的 基础 知识 及 经 典 技巧 。 身 处 设 
计 行业 ， 你 一 定 要 知道 “ 光 说 不 练 假 把 式 ”。 本 
书 不 仅 有 理论 ， 还 有 精彩 的 案例 赏析 ， 并 用 大 量 
的 模块 启发 你 的 头脑 ， 锻 炼 你 的 设计 能 力 。 

希望 读者 看 完 本 书后 ， 不 会 只 是 说 : “我 看 完了 ， 挺 好 的 ， 作 品 好 看 ， 分 析 也 挺 
好 的 。” 这 不 是 编写 本 书 的 目的 。 我 们 希望 读者 会 说 : “这 本 书 给 我 更 多 的 是 思路 上 
的 启发 ， 让 我 的 思维 更 加 开阔 ， 学 会 了 设计 上 的 举一反三 ; 通过 吸收 消化 ， 把 知识 变 
成 了 自己 的 。” 这 才 是 作者 编写 本 书 的 初衷。 


E 通 大 雪 网 页 的 基础 知识 。 介 绍 网 页 设计 的 色彩 、 点 / 线 / 面 、 构 成 。 


网 页 设计 的 五 大 原则 。 包 括 主题 鲜明 性 原则 、 形 式 统一 性 原则 、 色 彩 
和 谐 性 原则 、 简 洁 清晰 性 原则 、 友 好 性 原则 。 


第 下 
网 页 设计 的 基础 色 。 从 红 、 检 、 黄 、 绿 、 青 、 蓝 、 紫 、 黑 、 白 、 灰 
10 种 颜色 ， 逐 一 分 析 ， 讲 解 每 种 色彩 在 网 页 设计 中 的 应 用 规律 。 


这 本 网 页 的 布局 。 包 括 网 页 的 布局 方式 、 网 页 版 而 设计 的 常用 技巧 。 
6 和》 不 同行 业 的 网 页 色彩 搭配 。 包 括 14 种 不 同 的 风格 。 
网 页 色彩 的 视觉 印象 。 包 括 14 种 常见 的 色彩 视觉 印象 。 


第 6 章 
网 页 设计 秘笈 。 精 选 10 个 设计 秘笈 ， 让 读者 轻松 愉快 地 学 习 完 最 后 的 部 
分 。 本 章 也 是 对 前 面 各 章 知 识 点 的 巩固 和 理解 ， 读 者 要 动脑 筋 思考 。 


串 州 圭 扎 只 型 导 司 


， ”本 书 特 色 bp) 


@ 实践 为 主 ， 鉴 赏 为 辅 。 纯 鉴赏 类 书 只 能 欣赏 ， 看 完 后 自己 还 是 设计 不 好 ， 本 书 
则 不 同 ， 增 加 了 多 个 动手 的 模块 ， 让 读者 边 看 、 边 学 、 边 练 。 

昌 章节 合理 ， 易 于 吸收 。1~3 章 主要 讲解 网 页 设计 的 基本 知识 ，4~6 章 介 绍 网 页 
设计 的 布局 方式 、 不 同行 业 的 网 页 色彩 搭配 、 网 页 色彩 的 视觉 印象 等 ， 第 7 章 以 轻松 
的 方式 介绍 10 个 设计 秘笈 。 

@ 由 设计 师 写 ， 给 设计 师 看 。 针 对 性 强 ， 充 分 了 解读 者 的 需求 。 

模块 丰富 ， 内 容 细致 。 案 例 解析 、 设 计 技 巧 、 配 色 方案 、 设 计 欣 赏 、 设 计 实战 、 
设计 秘笈 在 本 书 中 都 能 找到 ， 更 全 面 地 满足 读者 的 求知 欲 。 

本 书 是 “ 写 给 设计 师 的 书 ” 系 列 图 书 中 的 一 本 。 在 本 系列 书 中 ， 读 者 不 仅 能 系统 
地 学 习 网 页 设计 ， 而 且 还 有 更 多 的 设计 专业 知识 供 读者 选择 。 

本 书 通过 对 知识 的 归纳 总 结 、 趣 味 的 模块 讲解 , 帮助 读者 打开 设计 思路 , 增强 动脑 、 
动手 的 能 力 。 和 希望 通过 本 书 ， 能 激发 读者 的 学 习 兴 趣 ， 帮 助 您 迈 出 第 一 步 ， 圆 您 一 个 
设计 师 的 梦 ! 

一 起 跟随 作者 ， 翻 开 新 的 一 页 学 习 吧 ! 

本 书 由 孙 芳 编写 ,参与 本 书 编 写 和 整理 工作 的 还 有 柳 美 余 、 苏 晴 、 郑 葛 、 李 木子 、 
矫 雪 、 胡 娟 、 马 春 铭 、 王 萍 、 董 辅 川 、 杨 建 超 、 马 啸 、 孙 雅 娜 、 李 路 、 于 燕 香 、 丁 仁 夫 、 
张 建 起 、 马 扬 、 王 铁 成 、 崔 英 迪 、 高 歌 。 

本 书 在 写作 过 程 中 ， 参 考 并 引用 了 一 些 网 站 页 面 。 下 面 列 出 若干 主要 网 站 的 相关 
网 址 : 


https://www.nhbank.com/ 
http://kiosk.com/ 
http://www.muji.com.cn/ 
http://jilky.com/ 
http://www.yoplait.com/ 
http://global.gmarket.co.kr/Home/Main 
http://www.petitejolie.com.br/ 
http://www.esteelauder.com/ 
http://www.awwwards.com/ 
https://www.designhotels.com/ 

由 于 作者 水 平 有 限 ， 书 中 难免 存在 错误 和 不 妥 之 处 ,希望 广 大 读者 批评 和 指正 。 
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网 页 的 基础 知识 


随 着 时 代 的 发 展 和 进步 ， 越 来 越 多 的 企业 和 个 人 都 会 建立 属于 自己 的 网 站 ， 用 来 在 
网 络 上 进行 展示 ， 以 达到 信息 推广 和 交流 的 目的 。 色 彩 搭配 作为 网 页 的 第 一 视觉 语言 
运用 得 当 是 锦上添花 ， 能 够 吸引 并 留 住 访客 ; 反之， 颜色 搭配 混乱 的 网 页 则 会 让 访客 心 
生 厌 倦 。 本 章 就 来 讲解 与 颜色 、 设 计 、 构 成 相关 的 网 页 基础 知识 。 
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色彩 的 基础 知识 


单纯 的 色彩 本 身 并 没有 任何 实际 意义 , 只 有 当 两 种 或 两 种 以 上 的 颜色 搭配 在 一 起 ， 
才 会 形成 不 同 的 视觉 感受 。 网 页 的 色彩 五 花 八 门 ， 若 想 引 起 访客 的 注意 ， 就 要 把 握 好 
整体 的 色彩 风格 。 本 节 主 要 学 习 色彩 的 基础 知识 。 
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我 们 生活 在 一 个 绚丽 缤纷 的 色彩 世界 中 ， 天 空 、 草 地、 海洋 、 花 条 都 有 它们 各 
的 色彩 。 色 彩 是 通过 眼睛 传人 大 脑 的 ， 然 后 结合 生活 经 验 ， 产 生 一 种 对 光 的 视觉 感受 
效果 。 如 果 这 个 世界 上 没有 光 ， 就 无 法 在 黑暗 中 分 辨 物体 的 颜色 。 
人 们 之 所 以 能 看 到 并 能 辨认 物体 的 色彩 和 形状 ， 是 因为 赁 例 光 的 映照 ， 反 射 到 我 
们 视网膜 上 的 结果 ， 若 没有 光 ， 那 么 物体 的 色彩 就 无 从 辨认 。 所 以 人 要 想 看 见 色彩 ， 
必须 满足 如 下 三 个 条 件 。 

第 一 是 光 ， 如 果 没 
光 ， 就 没有 色彩 。 

第 二 是 物体 ， 若 只 有 
光 而 没有 物体 ， 人 依旧 不 


第 人 民 晴 ， 人 的 眼 


睛 中 知 和 神经 传 
导 系 统 ， ee 一 一 一 > 
辨别 出 不 同 的 颜色 。 Pe 反射 光 
可 见 光 是 电磁 波谱 中 
人 有 眼 可 以 感知 的 部 分 ， 一 umma 紫外 线 ”红外 线 
般 在 380 纳米 到 780 纳米 x 册 线 2 ， 
波长 范围 内 ， 包 括 从 红色 Tn 
到 紫色 的 所 有 色彩 的 光 。 0 ul 
阳光 是 复 Ce 有 红 、 2 SS 
橙 、 黄 、 绿 、 紫 
这 些 不 同 频 3 一 束 
阳光 射 人 三 棱镜 后 ， 会 发 380nm 78onm 


生 偏 转角 度 不 同 的 折射 ， 
开 以 原本 一 个 方向 前 进 自 
光束 就 会 被 分 解 成 按 不 同 
篇 转角 度 顺 序 排列 的 光 
带 ， 这 个 光 带 就 是 光谱 。 
光谱 实际 上 就 是 一 种 可 见 
的 电磁 波 ， 有 波长 和 振幅 
两 种 特性 ， 其 中 波长 的 差 
异 造 成 色相 的 区 别 ， 如 短 
波长 为 紫色 ， 中 波长 为 绿 
色 ， 长 波长 为 红色 ; 振幅 
的 大 小 则 决定 了 光 的 强 
弱 ， 也 就 是 色彩 的 明暗 。 
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1 2 区 网 页 色彩 的 特性 


网 页 上 的 色彩 是 通过 计算 机 显示 器 进行 表现 的 ， 它 具有 特殊 性 。 只 有 正确 地 了 解 
网 页 色彩 的 属性 ， 才 能 更 加 合理 地 运用 色彩 ， 制 作出 精美 的 网 页 。 

计算 机 显示 器 呈现 的 画面 是 由 一 个 个 被 称 为 像素 的 小 点 构成 的 ， 像 素 把 由 光 的 
三 原色 红 (R ) 绿 (G ) 蓝 (B) 组 合成 的 色彩 按照 科学 的 原理 表现 出 来 。 像 素 的 每 种 
原色 在 内 存 中 包含 8 位 宽度 , 可 代表 0 ~ 255 共计 256 种 取 值 。 0 是 完全 无 光 的 状态 ， 
255 是 最 亮 的 状态 。 

网 页 中 的 色彩 都 是 依靠 数字 表达 的 ， 为 了 保证 数据 在 交换 过 程 中 的 完整 性 ， 每 一 
台 终 端 机 获得 的 数据 都 是 相同 的 。 但 是 , 由 于 计算 机 设备 、 操 作 系 统 、 色 彩 模式 的 不 同 ， 
即使 是 同一 个 网 页 ， 显 示 的 色彩 还 是 会 有 偏差 的 。 

尽管 一 些 因素 会 影响 网 页 的 色彩 ， 但 
是 ， 设 计 网 页 时 ， 可 以 通过 网 页 安全 色 去 
最 大 限度 地 消除 色彩 在 传播 过 程 中 的 差 
别 。 网 页 安全 色 是 256 色 模 式 中 一 些 规 
定数 值 的 通用 标准 色彩 组 合 ， 它 一 共有 
6x6x6=216 种 色彩 。 


de 色彩 的 属性 


色彩 的 属性 是 指 色 相 、 明 度 、 纯 度 三 种 性 质 。 它 们 分 别 代表 着 色彩 的 外 貌 、 色 彩 
的 明暗 程度 和 色彩 的 鲜艳 程度 。 我 们 之 所 以 能 在 繁杂 的 颜色 中 加 以 区 分 ， 就 是 因为 每 
一 种 颜色 都 有 自己 的 鲜明 特征 。 颜 色 的 三 个 属性 在 某 种 意义 上 是 各 自 独立 的 ， 但 在 另 
外 意义 上 又 是 互相 制约 的 。 一 种 颜色 的 某 一 个 属性 发 生 了 改变 ， 那 么 ， 这 种 颜色 的 特 
征 必然 要 发 生 改变 。 


@sf 


任何 一 种 彩色 都 有 属于 自己 的 色相 ， 
色相 是 指 颜 色 的 基本 相貌 ， 它 是 颜色 彼 @@ 
此 区 分 的 最 主要 、 最 基本 的 特征 。 为 了 
应 用 方便 ， 通 常 以 光谱 色 序 为 色相 的 基 
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色 环 。 
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(eS 明度 


明度 是 指 颜色 的 明暗 程度 ， 色 彩 的 明 
度 分 为 两 种 情况 : 一 种 是 相同 色相 的 不 同 
明度 ， 另 一 种 是 不 同色 相 的 不 同 明 度 。 一 
个 画面 只 有 颜色 而 没有 明度 的 变化 ， 就 显 
得 死板 、 缺 乏 立体 感 ， 因 此 明度 是 表达 立 
体 空间 关系 和 细微 层次 变化 的 重要 特征 。 


高 明度 。 ”中 明度 。 低 明度 


和 


纯度 又 叫 饱和 度 、 彩 度 ， 是 指 颜色 的 
浓度 ， 也 可 理解 成 色彩 的 鲜艳 程度 。 越 是 图 + | | 
鲜艳 的 颜色 , 其 所 包含 的 色 量 越 高 。 相 反 ， 
一 个 低 纯度 的 颜色 ， 其 中 所 含 色 量 很 低 。 
例如 ， 在 一 种 纯色 中 添加 白色 、 灰 色 和 黑 
度 都 会 发 生变 化 。 
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色 ， 它 的 颜色 纯 


人 ET 色彩 的 分 类 


按照 视觉 效果 ， 可 以 
将 色彩 分 为 有 彩色 和 无 彩 
色 两 种 。 Wy [HaoDo 

有 彩色 是 带 有 色彩 倾 是 | 
向 的 颜色 , 例如 常见 的 红 、 | 是 NI 人 
橙 、 黄 、 绿 、 青 、 蓝 、 紫 等 ， CE 
这 些 都 是 有 彩色 。 无 彩色 
是 指 墨 、 白 以 及 各 种 明度 
的 灰色 。 无 彩色 只 具有 了 明 
度 ， 不 含有 色彩 倾向 。 


1.1.5 色彩 的 心理 感受 


东 豆 疆 字 区 甚 办- 


1 @& 色彩 的 重量 感 


色彩 的 轻重 感 ， 主 要 取决 于 明度 。 明 度 高 的 颜色 感觉 轻 ， 
当 色彩 的 明度 相同 时 ， 纯 度 高 的 比 纯度 低 的 感觉 轻 。 
Bigen BLOG SNS 
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多 色彩 的 远近 感 


色彩 的 远近 感 是 色彩 
的 明度 、 纯 度 、 面 积 等 多 
种 对 比 造成 的 错觉 现象 。 
高 明度 、 暖 色调 的 颜色 会 
感觉 靠 前 ， 这 类 颜色 被 称 
为 前 进 色 ; 低 明 度 、 冷 色 
调 的 颜色 会 感觉 靠 后 ， 这 
类 颜色 被 称 为 后 退色 。 
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色彩 的 心理 感受 是 指 不 同色 彩 的 色相 、 明 度 、 纯 度 给 人 带 来 不 同 的 心理 暗示 。 视 
觉 受 色彩 明度 及 纯度 的 影响 ,会 产生 冷暖 、 轻 重 、 远 近 等 不 同感 受 和 联想 。 色 彩 本 身 
并 无 情感 ， 而 是 人 们 通过 对 生活 经 验 的 积累 ， 对 色彩 形成 了 心理 感受 。 


肯 度 低 的 颜色 感觉 重 。 


TEMAP 
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Ey 颜色 的 冷暖 感 


对 颜色 冷暖 的 感受 是 人 类 对 颜色 最 为 敏感 的 感觉 ， 在 色 环 中 绿色 一 边 的 色相 为 冷 
色 , 红色 一 边 的 色相 为 暖色 .冷色 给 人 一 种 冷静 、 沉 着 、 严 寒 的 感觉 , 暖色 给 人 一 种 温暖 、 
热情 、 活 泼 的 感觉 。 
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在 设计 一 个 作品 时 ， 颜 色 通 常 由 主 色 、 辅 助 色 和 点 级 色 组 成 。 主 色 广 义 上 的 含义 
是 占据 画面 最 多 的 颜色 ， 它 决定 了 整个 作品 的 色彩 基调 。 辅 助 色 是 用 来 烘托 、 演 染 主 
色调 的 ， 当 辅助 色 与 主 色调 为 同色 系 时 ， 作 品 效果 和 谐 、 稳 重 ; 当 辅 助 色 为 主 色 的 对 
比 色 或 互补 色 时 ， 作 品 效果 活泼 、 激 情 。 点 绥 色 是 占据 面积 最 小 的 颜色 ， 可 以 理解 为 
点 睛 之 笔 ， 是 整个 作品 的 亮点 所 在 。 
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网 页 设计 的 点 、 线 、 面 


点 、 线 、 面 是 组 成 网 页 版 式 的 最 基本 元 素 , 也 是 一 切 视觉 艺术 不 可 或 缺 的 组 成 部 分 。 
通常 由 点 到 线 ， 由 线 到 面 ， 它 们 之 间 存 在 一 种 循序 渐进 的 关系 。 点 、 线 、 面 之 间 的 组 
合 形成 不 同 的 视觉 形象 ， 从 而 传递 出 不 同 的 视觉 信息 。 
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点 是 最 基本 的 形态 , 是 造型 艺术 中 最 小 的 构成 单位 。 点 可 以 是 一 个 色 块 、 一 个 文字 ， 


也 可 以 是 圆 形 、 和 矩形 、 不 规则 图 形 。 点 虽然 面积 小 ， 但 是 它 具 有 形状 、 方 向 、 大 小 、 


等 变化 。 
如 果 画 面 中 只 有 一 个 点 ， 那 么 它 可 以 集中 视线 。 如 果 有 两 个 一 样 大 小 的 点 ， 并 各 
的 时 候 ， 它 的 张力 作用 就 表现 在 连接 这 两 个 点 的 视线 上 ， 即 在 视觉 心理 上 


民 


a 


产生 连续 的 效果 。 

点 可 以 集中 视线 ， 具 
有 画龙点睛 的 作用 。 如 果 
个 点 的 大 小 不 同 ， 那 么 
大 的 点 更 能 吸引 视线 ， 但 
是 视线 会 逐渐 从 大 的 点 移 
自 小 的 点 ， 最 后 集中 到 小 
的 点 上 ， 越 小 的 点 积聚 力 
越 强 。 


问 次 重 盯 开 汪 司 需 L 潞 


bz 
2| 


1.2.2 基 有 


线 是 由 点 的 运行 所 形 
成 的 轨迹 , 又 是 面 的 边界 。 
在 构图 中 表示 方向 \ 长 短 、 
重量 、 刚 柔 ， 以 线 构成 的 
画面 可 以 给 人 一 种 规律 感 
和 韵律 感 。 
不 同 的 线 给 人 的 感觉 
也 会 不 同 ， 直 线 表 现 静 ， 
折线 表现 动感 。 
线 有 很 强 的 心理 暗示 
作用 , 通常 直线 代表 男性 ， Riaro 
象征 着 力量 、 稳 重 ; 曲线 
尺 表 女 性 ， 和 象征 着 柔美 、 


温 3 


hl 


1.2.3 


在 平面 设计 中 , 面 只 有 长 度 和 宽度 , 却 没有 厚度 。 面 的 表现 力 比 点 和 线 都 要 强烈 ， 
它 的 形态 是 多 样 的 ， 不 同形 态 的 面 在 视觉 上 有 不 同 的 作用 和 特征 。 例 如 : 矩形 具有 平 
衡 感 ， 三 角形 具有 稳定 感 ， 圆 形 具有 饱满 感 。 有 规律 的 面具 有 简洁 、 明 了 、 稳 定 和 秩 
9 层 的 面具 有 和 柔软、 轻松 、 生 动 的 感觉 。 
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网 页 虽然 形式 上 千差万别 ， 但 是 主要 的 构成 要 素 却 大 同 小 异 。 通 
| 题 栏 、 网 站 Logo、 页 眉 、 页 脚 、 导 航 和 主体 内 容 构 成 的 。 
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网 页 的 局 限 性 在 于 它 无 法 突破 显示 器 的 显示 范围 ， 在 本 来 就 局 促 的 空间 中 ， 浏 览 


器 也 占 去 了 不 少 空 间 ， 所 以 网 页 屏幕 尺寸 也 不 相同 。 
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也 就 是 说 ， 浏 览 器 中 的 可 用 空间 受到 屏幕 分 辨 率 的 影响 。 大 多 数 人 将 显示 器 分 
辩 率 设置 为 1024 x768 像素 。 分 辩 率 设置 为 640 x 480 像素 或 800 x 600 像素 的 只 
是 极 少数 。 但 是 ， 考 虑 到 以 低 分 辩 率 来 适应 高 分 辩 率 的 原则 ， 所 以 很 多 网 站 还 是 在 
800 x 600 像素 的 分 辨 率 中 进行 制作 。 有 些 使 用 1024 x 768 像素 分 辨 率 制 作 的 网 站 ， 
在 页 丑 或 页 脚 上 会 注 明 “建议 分 辨 率 为 1024 x 768” 字 样 。 

当 显 示 器 的 分 辨 率 为 人 5 站 
800 x 600 像素 时 ， 浏览 器 。 [sse as 一 
的 屏幕 最 大 宽度 为 800 像 ”w= 
素 ， 由 于 默认 的 垂直 深 动 
条 占 20 像素 ， 默 认 的 内 容 
距离 页 面 左右 边 各 10 像 
素 ， 所 以 网 页 的 安全 宽度 
人 所 谓 “ 安 
全 ”， 是 指 在 全 屏 显 示 的 
时 候 ， 浏 览 器 是 不 会 出 现 
水 平 深 动 条 的 。 
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若 把 浏览 器 的 宽度 减 A creatie, modern Amercan Val Colorado restaurant - Swect Basil - Windows Intenet E... eul cE | 
少 到 800 像素 以 内 , 在 浏 ”|@ 品 + [@-8+. @ -|B[4[x|] 回 arc = 
览 器 的 底部 就 会 出 现 水 平 x 层 smot 国电 
的 深 动 条 ， 这 是 因为 网 页 便 收 藏 天 | 闹 昌 ] 建议 站 ” 忆 ]F 
主体 内 容 的 宽度 大 于 浏览 “| 
器 内 容 的 宽度 。 

通常 来 说 ， 如 果 访问 只 
者 需要 拖 电 水 平 滚动 条 才 yA BE Winner 
能 够 浏览 到 网 页 中 的 所 有 RS _Diners’ choice 201 
内 容 ， 那 么 这 张 网 页 的 设 D 
计 就 是 不 成 功 的 。 


3 出 ”页 面 P) 。 安全 6) -工具 (0)- ” 


图 imtiemet | 保护 模式 : 启用 从 7 R100% 7 


网 页 标题 是 对 一 个 网 页 的 高 度 概括 ， 每 一 个 网 站 中 的 每 个 页 面 都 有 一 个 标题 ， 
来 提示 页 面 中 的 主要 内 容 。 它 的 主要 作用 是 引导 访问 者 清楚 地 浏览 网 站 中 的 内 容 。 
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图 Intemet | 保护 模式 : 启用 
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1.3.3 


网 站 的 Logo 


在 IT 领域 ，Logo 是 标志 、 徽 标的 意思 ， 主 要 的 用 途 是 与 其 他 网 站 链接 以 及 作为 
网 站 的 标志 。 图 形 化 形式 ( 特别 是 动态 ) 的 Logo 链接 ， 比 文字 形式 的 链接 更 能 引起 


人 们 的 注意 。 


为 了 便于 Intemet 上 信息 的 传播 ， 采用 统一 的 国际 标准 是 必要 的 。 关 于 网 站 的 


Logo， 目 前 有 三 种 规格 。 
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坎 皇 盯 吾 半 司 册 ! 站 
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令 88 x 31 像素: 这 是 互联 网 上 最 普遍 的 Logo 规格 。 
令 120 x 60 像素 : 这 种 规格 用 于 一 般 大 小 的 Logo。 
令 120 x 90 像素 : 这 种 规格 用 于 大 型 Logo。 


1.3.4 网 页 页 眉 


网 页 页 眉 指 的 是 页 面 项 端的 部 分 ,有 的 页 面 划分 比较 明显 ,有 的 页 面 没有 明确 区 分 。 
通常 情况 ， 页 丑 的 设计 风格 与 整体 页 面 风格 一 致 ， 富 有 变化 的 页 届 有 与 网 站 Logo 一 
全 证 下 页 眉 位 置 的 吸引 力 较 高 ， 大 多 数 网 站 创建 者 在 此 设置 网 站 的 宗旨 、 宣 
传 口号 、 广 告 标语 等 。 
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1.3.5 网 页 页 脚 


网 页 的 页 脚 位 于 页 面 的 底部 ， 通 常用 来 标注 站 点 所 属 公 司 的 名 称 、 地 址 、 网 站 版 
权 信 息 、 daira 使 用 户 能 够 从 中 了 解 该 站 点 所 有 者 的 基本 情况 。 
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网 页 导航 是 指 通过 一 定 的 技术 手段 ， 为 网 站 的 访问 者 提供 一 定 的 途 


途径 ， 使 其 可 以 


方便 地 访问 到 所 需 的 内 容 。 网 页 导航 在 每 个 网 页 中 的 位 置 都 是 不 同 的 。 网 页 导航 表现 


为 网 站 的 栏目 菜单 设置 、 辅 助 菜单 和 其 他 在 线 帮 助 等 形式 。 


architects 


向 


1 网 页 的 主体 内 容 


主体 内 容 是 网 页 设计 的 元 素 。 它 一 
是 内 容 的 部 分 摘录 。 其 表现 手法 一 般 是 图 像 和 文字 相 结合 。 


股 是 二 级 链接 内 容 的 标题 ， 或 是 内 容 提要 ， 或 
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网 页 设计 的 五 大 原则 


网 页 设计 也 是 艺术 类 的 表现 形式 ， 视 觉 传达 设计 开拓 了 新 的 网 络 视觉 文化 空间 。 对 
于 网 页 设计 师 来 说 ， 打 造 非凡 的 交互 体验 ， 设 计 一 个 可 用 性 强 的 网 站 是 大 家 共同 的 目标 。 
但 是 企业 也 有 着 自己 的 需求 ， 因 而 这 两 者 经 常会 出 现 冲突 。 所 以 在 对 网 页 版 式 的 设计 中 


要 遵循 以 下 几 点 原则 。 
(1) 主题 鲜明 性 原则 。 
(2) 形式 统一 性 原则 。 
(3) 色彩 和 谐 性 原则 。 
(4) 简洁 清晰 性 原则 。 
(5) 界面 友好 性 原则 。 
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主题 鲜明 性 原则 


9 主题 是 整个 网 站 的 灵魂 所 在 ， 它 起 到 对 网 站 的 整体 风格 和 特色 做 出 定 


位 、 规 划 网 站 的 组 织 结构 


9 作 


这 就 要 求 设计 师 不 但 要 以 单 纪 


性 的 同时 
可 以 通过 以 


， 更 应 该 注 本 
下 三 点 做 至 


且 通 过 交 
网 页 广 


。 通 常 ， 设 计 师 会 通过 视觉 设计 去 表现 网 页 的 主题 ， 
Et、 简练 、 清 晰 和 精确 的 形式 进行 表达 ， 而 且 在 强调 艺术 
寺 的 风格 和 强烈 的 视觉 冲击 力 来 鲜明 地 突出 设计 主题 。 
E 题 鲜明 。 


人 


) 对 网 页 构成 元 素 运 有 


合 设 计 


(2 ) 抓 住 访客 心 


术 的 形式 美 法 则 进行 条 理性 处 理 ， 以 便 更 好 地 营造 符 


的 的 视觉 环境 ， 从 而 起 到 使 主题 鲜明 的 作用 。 
理 ， 按 照 视 觉 心 理 规律 和 形式 将 主题 主动 地 传达 给 访客 ， 以 使 主 


题 在 适当 的 环境 中 被 访客 接受 。 


(3 ) 网 页 的 效果 力求 简洁 ， 要 点 明确 ， 以 简单 明确 的 语言 


题 ， 从 而 吸引 访客 的 


注意 。 


画面 来 体现 本 站 的 主 


Noritape- 
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主题 鲜明 的 网 页 设计 


在 制作 网 页 的 初期 ， 
才能 在 此 基础 上 


设计 理念 : 在 该 网 页 中 ， 画 面 中 的 | 


图 上 都 与 食品 相关 联 ， 从 而 可 以 多 证 这 | 
是 一 个 以 食品 为 主题 的 网 页 设计 。 该 网 | 


| 页 结构 并 不 复杂 ， 内 容 一 目 了 然 。 
色彩 点 评 :该 网 页 整体 时 现 出 一 种 ; 


| 灰色 调 ， 是 典型 的 “日 式 风格 ”配色 。 
| 其 中 采用 浅 卡其 色 作为 背景 颜色 ， 
| 体 画面 呈现 柔和 、 朴 素 的 效果 。 

| 侠 导 航 栏 位 于 网 页 的 左 侧 ， 
| 字 竖 向 排列 ， 非 常 有 民族 特点 。 


一 定 要 为 网 页 设 定 一 个 明 确 的 主 


让 整 ; : 

: EE CMYK=71.48.100.7 RGB=94.117.10 | 

: EE CMYK=23.35.82.0 RGB=213.173.63 | 

并 将 文 : M : 
: I CMYK=3.51.66.0 RGB=248.155.87 

CMYK=60.49.44.0 RGB=121.126.131 | 


。 只 有 了 明 


| 
浅 卡 其 色 的 对 比较 弱 ， 给 人 一 种 柔和 、 | 
亲切 的 感觉 。 | 
鲍 作 为 食品 类 的 网 页 设计 ， 以 绿色 | 
| 作为 点 级 色 ， 给 人 一 种 健康 、 自 然 、 美 : 


| ; 味 的 视觉 效果 。 


CMYR=7.7.16.0 RGB=241,237,220 


ra 人 日 本 才 则 > 已 y 旋 委员 会 


该 网 页 为 运动 主题 的 网 页 ， 以 白 


| 搭配 红色 ， 给 人 一 种 积极 、 奋 进 


的 视觉 转 CMYK= 78.72.69.39 RGB=58.58,58 


| 印象 。 该 网 页 布局 简约 ， 以 大 幅 图 片 作 ; ; 国 CMYK=12.93.85.0 RGB-228.42.42 


; 为 视觉 中 心 ， 非 常 具有 吸引 力 。 


CMYK=19.15.14.0 RGB=213.213.213 


CMYK=0.0.0.0 RGB=255.255.255 


a 


> 
| 画面 中 颜色 简单 配色 效果 鲜明 ， 非常 具 | 国 CMYK=100.96.26.0 RGB=23.41.132 | 
| 有 吸引 力 。 该 网 页 以 冰 江 淋 作为 主题 ， 它 | 国 CMYK=11.96.17.0 RGB=230.0.126 
| 并 没有 以 实景 图 片 作为 宣传 重点 ， 这 种 另 | CMYK=6.16.82.0 RGB=254.220,49 


| 和 辟 蹊 径 的 设计 方式 ,给 人 留 下 深刻 的 印象 。 | CMYK=45.11.92.0 RGB=164.196.47 | 
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悍 河 省 几 于 吾 涉 半 司 需 z 溃 


提升 网 页 品质 的 技巧 一 一 留 白 


“ 留 白 ”就 是 留 下 空白 ， 它 不 是 一 个 色彩 概念 ， 而 是 一 种 形式 概念 ， 它 依存 于 整体 
布局 结构 关系 中 。 利 用 留 白 这 种 手段 ， 可 以 向 访客 传达 出 设计 者 的 诉求 。 


留 白 效果 处 理 得 当 ， 

整个 画面 会 显得 整洁 而 有 

开放 感 ， 画 面 的 主题 往往 

更 具 吸 引力 。 留 白 的 表现 

手法 不 只 应 用 于 网 页 设计 ， 

在 其 他 领域 也 应 用 广泛 ， 

例如 版 式 设计 、 海报 设计 、 

绘画 等 多 个 领域 。 
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形式 统一 性 原则 是 指 在 整个 网 站 中 ， 每 个 网 页 之 间 在 内 容 上 存在 联系 、 在 表现 形 
式 上 相互 呼应 ， 做 到 整个 画面 风格 统一 、 色 彩 统一 、 布 局 统一 的 效果 。 

在 一 个 网 站 中 会 存在 多 个 页 面 ， 当 访客 从 一 个 页 面 跳 转 到 另外 一 个 页 面 时 ， 两 个 
页 面 在 风格 、 色 彩 和 布局 上 要 有 一 定 的 关联 ， 这 样 才能 够 符合 形式 统一 性 原则 。 如 果 
违背 了 形式 统一 性 原则 ， 则 设计 出 来 的 作品 不 但 没有 生气 ， 就 连 最 基本 的 视觉 设计 和 
信息 传达 功能 也 无 法 实现 ， 甚 至 有 可 能 会 传递 错误 的 信息 ， 造 成 混乱 。 
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形式 统一 的 网 页 设计 可 以 让 访客 更 加 快捷 、 精 准 、 全 面 地 掌握 网 站 的 内 容 ， 并 给 
人 一 种 内 部 有 机 联系 、 外 部 和 谐 完整 的 美感 。 通 常 可 以 从 布局 、 色 彩 、 风 格 三 个 方面 
来 构成 形式 上 的 统一 。 


这 是 来 自 一 个 网 站 中 | 。 全 高 度 的 形式 统一 可 以 让 整个 网 站 | 
| 的 两 个 页 面 之 一 ， 它 们 的 布局 、 色 彩 ; 看 起 来 非常 连贯 ， 符 合 人 们 的 审美 习惯 

| 和 风格 都 是 互相 统一 的 。 整 个 页 面 的 ; 。” 侈 网 页 的 布局 别 出 心 截 ， 将 网 页 | 
| 布局 非常 简单 ， 中 央 的 宣传 图 很 好 地 | Logo 放置 画面 的 左 侧 ， 这 样 的 手法 是 比 | 
| 介绍 了 商品 ， 网 页 Logo 、 标 题 和 导航 | 较 少 见 的 。 


| 分 别 位 于 图 片 的 左 、 上 、 右 侧 ， 使 用 ; 。”” 作 简约 的 布局 方式 和 白色 调 的 配色 ,| 
| 方法 了 然 。 i 使 整个 页 面 看 起 来 非常 简单 、 大 方 , 可 | 
| 该 网 页 以 白色 作为 主体 ; 以 给 访客 留 下 极 佳 的 印象。 | 
| 颜色 ， 整 个 画面 看 起 来 干净 、 清 爽 ， 在 CMYK=0.0.0.0 RGB=255.255.255 


| 对 比 的 作用 下 ， 黑 色 的 文字 变 得 非常 突 | I CMYK=100.100.100.100 RGB=0.0.0 | 
| 出 ， 易 于 访客 的 阅读 和 理解。 | CMSYK=0.96.95.0RGB-25500 | 


THE 
| STABLES | 
: "labels :categories 和 °° EE : 


ET 


| 人 一 oo 儒雅 的 感觉， 


| 形 以 相同 的 形状 整齐 摆 放 ， 在 视觉 上 营 ; ; 国 CMYK=-91.66.88.50RGB-7.54.39 
: 造 了 一 种 平衡 的 感觉 。 商 品 的 背景 为 统 ; CMYK=19.14.14.0 RGB=214.214.214 
一 的 灰色 ， 也 形成 了 统一 的 视觉 感受 。 CMYK=4.3.3.0RGB-247.247.247 


1 
画面 中 ， 图 | ; 国 CMYK=78.70.64.27 RGB=66.70.74 1 


串 州 圭 抽 吵 型 导 司 


该 网 页 采用 类 似 色 的 配色 原 理 ， 青 | 


| | 色 为 主 色调 ， 绿色 为 辅助 色 。 整 个 页 面 | | 国 CMYK=11.0.83.0 RGB=253.255.0 
| 给 人 清新 、 活 泌 的 感觉 。 商 品 包装 中 的 | ! 国 CMYK=83.43.17.0 RGB=0.128.182 
| | 绿色 与 绿色 的 草地 相 呼应 ， 整个 画面 色 | 


图 CMYR=55.11.100.0 RGB=136.186.26 


在 网 页 设计 的 过 程 中 ， 尽 管 要 融入 很 多 创新 元 素 ， 但 是 整个 网 站 的 风格 要 统一 ， 
这 样 才能 使 整个 网 站 看 起 来 是 一 个 整体 。 我 们 可 以 通过 按钮 、 链 接 、 导 航 栏 等 设计 ， 


梧 让 整个 网 站 的 风格 一 致 。 
| 
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色彩 和 谐 性 原则 


色彩 是 一 种 强 有 力 的 视觉 语言 ， 它 甚至 比 
会 影响 整个 网 站 的 定位 、 风格 、 情 感 。 通 过 不 
的 刺激 ， 从 而 产生 共鸣 。 


es SKINFQOD a 


an Sanowe em aooy wm om 区 要 了 


EN 加 器 


页 布局 更 具 视 觉 影响 力 。 色 彩 的 搭配 
的 配色 方案 ， 可 以 给 访客 带 来 感官 上 


| 多 
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囊 州 闻 次 中 型 涛 司 


每 一 种 色彩 都 具有 不 同 的 情感 ， 所 以 一 个 优秀 的 网 页 设计 ， 色 彩 的 搭配 是 至 关 
要 的 。 网 页 中 的 色彩 和 谐 ， 能 给 访客 一 种 心旷神怡 的 感觉 ， 也 能 够 传递 一 种 统一 、 正 
确 的 观念 ， 让 访客 觉得 这 个 网 站 是 认真 、 庄 重 的 。 


| 设计 理念 : 该 网 页 采用 海报 型 的 布 ; 力 和 号 召 力 。 
| 局 方式 ， 视 觉 效果 强烈， 利用 全 屏 的 图 | ”从 以 粉色 调 作为 该 网 页 的 主 色调 ， 
| 片 和 简洁 的 文案 传递 出 产品 的 气质 和 理 | 非常 贴切 主题 | 
| 念 ， 同 时 给 和 人 大方、 舒展 的 感觉。 | 俐 网 页 中 虽然 内 容 丰富 ， 但 是 条 理 | 
色彩 点 评 : 该 网 页 以 粉色 为 主 色调 ， | 清晰 ， 非 常 易于 访客 的 理解 和 消化 。 


| 以 红色 、 洋 红色 作为 点 级 色 。 整 体 采用 i | | BEE CMYK- 14,99.76.0 RGB=224.8.54 


CMYK=14.26,7,0 RGB=225,200,216 | 
| CMYK- 19.100,100.0 RGB=215,5,18 | 
| EE CMY K-48, 100.58.7 RGB=153.8.76 | 
EU CMYK=63.69.45.2 RGB=119.92 114 | 


| 同类 色 的 配色 方案 ， 画 面色 感 和 谐 ， 多 | 
| 种 点 缀 色 让 画面 颜色 变 得 丰富 。 
人 独 该 网 页 主题 明确 ， 非常 具有 吸引 | 


a AMOREPACIFIC a 


i 在 该 网 页 中 ， 有 彩色 的 部 分 主要 来 自 
| 于 网 页 中 的 图 片 。 我 们 可 以 看 到 ， 这 两 幅 
| 图 片 色调 是 非常 相近 的 ， 这 也 是 网 页 色彩 
| 和 谐 的 关键 。 


CMTYK=38.23.13.0 RGB=171.186.207 
: CMYK=46.21.49.0 RGB=156.181.143 
: CMYR=25.13.,19.0 RGB=202.211.206 
i 到 CMYK=37.19.21.0 RGB=174.192.196 
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该 网 页 采用 单 色调 的 配色 方案 ， 红 色 

配 y 色 与 商品 的 应 色相 协调 ， 整个 画面 色 | 国 CMYK=91.87.87.78 RGB=4.4.4 
色 活 和 谐 。 网 页 中 黑色 的 导航 栏 有 稳 | 站]CMYK=0.0.0.0 RGB=255.255.255 
设 效果 的 作用 ， 白 色 的 文字 在 红色 背 ; 加 cMyk=s9.76.52.6 RGB=126.79.98 
< 的 衬托 下 ， 显 得 酒 脱 、 率 真 ， 而 且 易于 | 国 cMYK=s3.100.100.41 RGB=105.2.1 


读 。 CMYK=28.100.100.1 RGB=199.1.0 


视觉 元 素 如 果 有 清楚 的 浏览 次 序 ， 那 么 应 该 明确 它们 的 层级 关系 。 层 级 关系 明确 的 


网 页 设计 通常 会 按照 顺序 去 浏览 网 页 ， 网 页 的 主旨 也 会 在 短 时 间 内 精准 地 传递 给 访客 。 


如 果 一 个 网 页 层级 关 ae wen sd .起 
系 不 明确 ， 那 么 访客 在 浏 
览 网 页 的 过 程 中 就 会 困惑， PUA EAST 0 2 
甚至 离开 网 页 。 ENTRANCE FREE 


例如 在 右 图 中 ， 标 题 jofubeats ww GRINN 
文字 与 段落 文字 的 字号 存 2 
在 着 较 大 的 差异 ， 这 就 是 Juninoue 


层级 关系 的 一 种 体现 。 BUAISOU/ Masashi Hirao_ -ro 
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简洁 请 晰 性 原则 是 指 去 除 不 重要 的 内 容 ， 而 仅 保 留 较 少 的 重要 内 容 ， 突 出 网 
页 设计 的 主题 信息 。 简 洁 清 晰 的 网 页 设计 通常 主题 突出 ， 中 心思 想 明 确 ， 非 常 易 
于 记忆 和 理解 ， 而 且 简 洁 、 清 晰 、 新 颖 的 效果 将 更 加 深入 人 心 。 如 今 简 洁 清 晰 的 
网 页 设计 越 来 越 流 行 ， 缩 短 了 人 们 观看 网 页 的 时 间 。 大 量 的 文字 内 容 ， 会 不 利于 


突出 重点 ， 满 屏 的 产品 介绍 ， 将 导致 杂乱 无 章 。 而 简单 的 网 页 设计 更 能 直击 人 心 ， 


快速 传递 情感 。 


击 避 淋 闻 遍 惑 加 目 . 
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简洁 清晰 的 网 页 设计 


简洁 清晰 的 网 页 设计 通常 会 减少 设计 元 素 的 使 用 ， 或 是 在 网 页 中 安排 大 量 留 白 ， 


这 样 做 的 目的 ， 在 于 


将 干 


扰 降 至 最 低 ， 以 便 用 户 能 够 专注 于 


大 面积 的 留 白 可 以 非常 清晰 地 突出 主题 ，; 
| 增强 网 页 的 表现 效果 。 网 页 的 构图 十 分 | 


| 简单 ， 


内 容 简 练 ， 易 于 访客 理解 。 
色彩 点 评 : 该 网 页 颜色 非常 简单 
央 和 眼帘 的 是 大 面积 的 红色 ， 具 
| 非常 鲜明 的 视觉 效果 。 | 
| ”全 在 该 网 页 中 ， 大 面积 的 留 白 增加 | 
| 了 网 页 的 空间 感 。 


要 的 内 容 


窗 的 布 


很 强 的 存在 感 。 


局 方式 下 ， 画 面 


的 | 


工 色 + 白色 的 配色 是 十 分 经 


| 配色 方案 


。 在 页 面 中 ， 白 


色 的 文字 和 红色 | 


击 力 。 


| 的 背景 反差 性 很 大 ， 具 有 很 强 的 视觉 冲 ; 


CMYK=0.0.0.0 RGB=255.255.255 
EE CMYK=16.88.91.0 RGB=221.62.36 
: I CMYK=84.79.76.61 RGB=30.32.33 


mikneta = 
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| 该 网 页 采用 高 明度 的 配色 方案 
i 面 属于 亮 灰色 调 , 视觉 效果 和 柔和、 优雅 。 
i 网 页 的 布局 十 分 简约 ， 在 很 大 程度 上 
i 升 了 用 户 体验 。 


CMYK=10.34.20.0 RGB=233,187,187 
CMYK=16.52.49.1 RGB=120,120,120 
CMYR=12.8,11,0 RGB=230.231.227 


| 该 网 页 采用 整 张大 图 作为 于 
| 极 强 的 视觉 冲击 力 ， 同 时 ， 可 以 有 效 地 9 CMYK=78,72,70,40 RGB=57.57.57 
i 导 访 客 驻足 观看 ， 从 而 达到 点 击 网 页 的 目 ; | 国 CMYK-69.96372 RGB-113.44.108 

: 的 。 在 该 网 页 中 ， 网 页 的 市 局 也 非常 简洁， CMSYK=10.8.8.0 RGB=235.233,232 

| 半 通 明 的 按 钥 ， 可 以 拉 开 网 页 前 景 所 与 背景 | 加 cMYK=38.42.45.0RGB=174.151.134 


文字 与 整个 版 式 都 息息相关 ， PP 但 是 ， 真 正 能 够 使 用 的 也 只 有 
一 小 部 分 , 所 以 要 尽 可 能 地 选择 网 页 安全 字 。 在 字体 的 选择 上 要 符合 画面 整体 的 气氛 ， 
例如 ， 有 的 字体 体现 严肃 ， 有 的 字体 体现 幽默 ， 有 的 字体 体现 力量 感 。 也 要 根据 信息 


的 主 次 关系 去 选择 不 同 的 字体 及 字号 ， 而 且 要 对 文字 的 “ 字 间 距 ” 与 “ 行 间距 ”进行 
调整 。 文 字 颜 色 的 选择 也 非常 重要 ， 因 为 色彩 可 以 使 文字 不 受 位 置 的 局 限 ， 加 强 或 减 
弱 文 字 的 表现 强度 。 
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5， 界面 友好 性 原则 


网 页 设计 的 友好 性 原则 包括 三 个 方面 。 第 
@ Hx 
网 

能 够 充分 满足 用 户 的 需要 ， 以 友好 的 信任 感 打动 人 心 ， 从 而 提高 网 站 的 访问 量 。 页 
设 

@ jj 网 络 环境 友好 计 
适合 搜索 引擎 进行 检索 ， 便 于 积累 网 络 营 销 资 源 。 

原 

@ 对 经 营 闭 友好 则 


能 够 使 经 营 者 的 网 站 日 常 维护 和 管理 更 高 效 、 方 便 、 友 好 。 
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友好 性 原则 


网 页 设计 的 友好 性 原则 通常 表现 为 打开 网 站 后 界面 美观 ， 便 于 使 用 ， 可 用 性 高 ， 


哲 日 D 妆 加 广 加 CT 
CAKE PERELLE 
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该 网 页 采用 海报 式 的 布 :背景 中 以 人 物 剪 影 效果 作为 点 | 
面 的 内 容 ， 又 不 会 喧 宾 ; 


| 局 方式 ， 整 体 效果 舒展 大 气 。 在 画面 中 


| 央 ,利用 色相 的 区 别 , 将 版 面 一 分 为 二 ， | | 
| 形成 了 鲜明 的 对 比 。 | 人 乡 标 题 文字 在 字体 的 选择 上 非常 符 | 
| 色彩 点 评 : 该 网 页 采用 类 似 色 的 配 ; 合 整 个 画面 的 气氛 ， 黄 色 的 字体 在 画面 | 
| 色 方 案 ， 以 青色 与 青绿 色 为 主体 色 ， 以 ; 中 效果 也 非常 突出 


| | 遇 估 山 。 
| 黄色 和 绿色 为 点 级 色 ， 整 体 色调 轻松 | OU CMYK=62.0.25.0 RGB=70.213,218 


| 活 泌 。 | ON CMYK=54.,0,39.0 RGB=106.232.191 | 
前 景 中 的 文字 位 于 两 个 版 面 的 中 : 和 天 惠 CMYK=8.5.86.0 RGB=253,237.2 


该 网 页 以 黄色 作为 主 色调 ， 


| 绿色 作为 
点 级 色 。 我 们 可 以 看 到 | 


网 站 的 Logo 是 


; 国 CMYK=91.87.87.78 RGB=4.4.4 


| 一 个 绿色 的 仙人 掌 ， 而 选择 黄色 作为 主 色 | | 回 CMYK=o.0.0.0 RGB-255.255.255 
| 调 是 为 了 让 访客 联想 到 沙漠 。 矢量 插画 的 | | 国 CMYK=71.13.93.0 RGB=73.170.66 : 
| 风 赂 设计 方式 给 人 一 种 网 也、 有 趣 的 感觉。 国 cMyk-7.17880 RGB-2532170 


i “这 是 We 一 本 
i 中 间 的 欢迎 问候 非常 me 
| 色调 给 给 人 一 种 神秘 、 

觉 。 采 用 俯 拍 手法 的 图 像 ， 很 
也 将 bl 了 画面 中 心 位 


浊 河 首 几 要 用 污 六 司 山 Zz 波 


导航 栏 最 红 j 旺 的 作用 就 是 是 指引 用 户 快速 进入 页 面 。 合 理 的 导航 条 可 以 使 得 页 面 层 
次 清晰 ,方便 用 户 使 用 。 在 导航 栏 的 设计 方面 ， 要 考虑 其 摆 放 位 置 、 风 格 、 所 用 技术 、 
可 用 性 和 网 页 易 读 性 。 


ARBOR 
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网 页 设计 的 基础 色 


一 切 网 页 均 离 不 开 色 彩 ， 因 为 颜色 的 不 同 ， 才 缔造 了 一 个 缤纷 的 网 络 世界 。 在 网 页 
设计 中 ， 色 彩 可 以 最 真实 、 准 确 地 传递 网 页 所 要 表达 的 感情 ， 它 对 于 网 站 气氛 的 泻 染 和 
意境 的 表现 都 起 到 了 决定 性 的 作用 。 网 页 中 的 颜色 还 可 以 帮助 用 户 了 解 和 解读 信息 ， 让 
用 户 在 潜意识 中 对 网 站 产生 良好 的 印象 。 本 章 就 来 学 习 网 页 设计 的 基础 色 。 
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红色 


击 否 淋 手记 东明 日 


红色 是 所 有 色彩 中 对 
视觉 感觉 影响 最 强烈 的 色 
彩 。 红 色 纯 度 较 高 时 ， 它 
炽 烈 似 火 ， 壮 丽 似 太阳 ， 
网 热情 奔放 ， 当 其 明度 增 大 
转 为 粉红 色 时 ， 则 变 为 甜 
色 美 纯真 、 天 真 烂漫、 和 柔情 
设 似 水 。 
计 色彩 情感 ， 热情、 活 
手 力 、 兴 旺 、 女 性 、 生 命 、 
册 喜庆 、 活泼、 热闹、 温暖 、 


幸福 、 甜蜜 、 爱情 、 吉 祥 、 
积极 、 碍 快 、 先 驱 、 名 誉 、 
政 恶 、 停止、 警告、 血腥 、 
和 危险。 


洋红 RGB=207.0,112 胭脂 红 RGB=215,0.64 玫瑰 红 RGB= 30.28.100 朱红 RGB=233,71,41 
CMYK=24,98,29,0 CMYK=9.85.86.0 


山茶 红 RGB=220.91.111 
CMYK=17.77.43.0 


| 壳 黄 红 RGB-248.198.181 | 浅 粉 红 RGB=252.229.223 
51.41.0 ! CMYK=3.31.26.0 i CMYK=1.15,11.0 ! CMYK=56.98,75,37 


威尼斯 红 RGB=200.8.21 


1 优 品 紫红 RGB=225.152.192 ; 
| CMYK=14.51.5.0 ! 


: i 灰 玫 红 RGB=194.115.127 
CMYK=28.100.100.0 ”| CMYK=28.100.54.0 ! CMYK=30.65.39.0 


»。% 


洋红 色 是 非常 女性 化 的 颜色 ,象征 着 妖娆 
释 美 | 
通过 观察 网 页 中 的 人 物 与 色彩 ， 不 难 发 现 
这 是 一 个 以 女性 为 主题 的 网 页 设计 。 
画面 中 层次 分 明 的 曲线 线条 ， 为 网 页 增添 
了 韵律 : 


玫瑰 红 比 洋红 色 中 的 红色 的 含量 多 ， 所 上 
玫瑰 红 更 加 柔美 、 饱 满 。 | 
在 该 网 页 中 ， 以 商品 的 颜色 作为 主 色调 ， ; 
整个 画面 十 分 和 谐 。 | 
玫瑰 红 表达 了 时 尚 、 前 卫 的 一 面 ， 在 现代 ; 
设计 中 十 分 常见 。 


胭脂 水 粉 自古 以 来 为 女人 所 用 ， 所 以 从 


朱红 色 是 介 于 鲜红 与 橘红 之 间 的 颜色 ， 


个 名 字 就 可 以 看 出 ， 胭 脂 红 同样 是 代表 
性 的 颜色 。 

该 网 站 为 单 色 调配 色 ， 通 过 不 同 的 红色 ， 
增加 画面 中 的 层次 关系 。 

在 这 样 颜色 较为 单纯 的 配色 中 ， 白 色 提 
了 画面 中 的 明度 ， 还 能 保证 画面 丰富 、 


沉 间 。 


红 给 人 一 种 热烈 而 又 含蓄 的 视觉 感受 。 
在 该 网 页 中 ， 以 朱红 色 作为 背景 ， 整 个 
面 传递 一 种 活 泌 、 欢 乐 的 感觉 。 


3.1.4 


鲜红 有 & 山茶 红 


INTRODUCING UV 
4 


SAL 
WATERMELON. 


击 否 导 于 沪 惑 骨 日 


| @ 鲜红 色 又 称 正 红色 ， 是 纯度 最 高 的 红色 。 山茶 红颜 色 纯度 较 低 ， 给 人 一 种 柔美 、 亲 | 
| 。 通常 会 表现 出 热烈 、 亢 奋 的 感觉 。 切 的 感觉 。 | 
| @ 在 该 网 页 中 要 突出 “ 辣 ” 这 个 主题 ， 所 


网 
页 
配 
色 
设 
计 
手 
册 


网 页 中 以 山茶 红 作为 主 色调 ， 主 要 是 与 商 ， 


| 。 选择 了 鲜红 色 作为 主 色调 。 品 的 口味 相互 呼应 。 
| @ 黄色 是 红色 的 对 比 色 ， 黄 色 作为 点 缀 色 ， 
| 让 画面 效果 更 加 强烈 。 


SHS 浅 玫瑰 红 区 


| @ 浅 玫瑰 红颜 色 纯 度 较 低 ， 给 人 一 种 温暖 、 
| 浪漫 的 视觉 感受 。 
| @ 本 案例 是 可 爱 风格 的 网 页 设计 ， 采 用 了 
| “玫瑰 红 ， 更 能 突出 网 页 的 风格 。 

| @ 网 页 中 的 主 色 及 辅助 色 都 是 采用 了 商品 


~ | 色调 ， 整 个 画面 色调 和 谐 、 统 一 。 


火 鹤 红颜 色 了 明度 较 高 ， 纯 度 较 低 ， 所 以 给 ; 
人 一 种 柔和 甜美 的 感觉 。 : 
在 该 网 页 中 ， 采 用 了 渐变 颜色 作为 背景 ， 
能 够 给 画面 增加 空间 感 。 


多 


忠和 主 盯 亚 沛 司 司 山 8 滤 


| @ 鱼 红 色 与 粉色 的 差别 很 大 ， 它 没有 粉色 俏 | 人 @ 壳 黄 红 与 鱼 红 颜色 十 分 相近 ， 只 是 明度 上 | 
| ， 皮 、 可 爱 ， 反 而 多 了 几 分 厚实 、 亲 切 的 | 较 链 红 色 高 一 些 ， 在 颜色 感觉 上 更 加 柔和 | 
| 。 质感。 | ”一 些 。 | 
| @ 网 页 为 食品 主题 的 网 站 设计 ， 以 链 红色 作 ; @ 本 案例 以 壳 黄 红 作为 背景 颜色 ， 整 个 画面 | 
| “为 主 色调 ， 让 浏览 者 产生 一 种 香甜 、 可 口 ， 流露 着 软 糯 香 甜 的 感觉。 | 

的 感觉 。 


NE XAG Mal o os 


@ 浅 粉红 是 可 爱 的 代名词 ， 这 种 颜色 温 婉 、 ; @@ 博朗 底 酒 红 是 介 于 大 红 和 洋红 之 间 的 颜 | 


柔软， 象征 着 甜蜜 和 爱情 . | 。 色 ， 该 颜色 比 以 上 颜色 更 加 浓郁 ， 具 有 强 ， 
| @ 网 页 中 以 柔美 的 浅 粉色 作为 主 色调 ， 与 商 。 ” 烈 的 感染 力 。 : 
| 。 品 的 颜色 相互 呼应 。 | @ 网 页 中 曲线 的 背景 似 行云流水 ， 为 画面 增 | 
| @ 画面 中 商品 占据 了 主要 版 面 ， 可 以 起 到 促 。 ”加 了 动感 。 | 


销 的 作用 。 


东 豆 疆 半 区 圳 曙 办- 


囊 州 半 潜 中 型 沿 于 


高 并; 中 ” 威尼斯 红 & 宝石 红 


威尼斯 红 较 鲜红 色 暗 一 些 , 本 身 带 有 稳定 、 宝石 红 倾向 于 ; ; : 
经 典 、 持 久 的 特性 。 : ”上 暗 一 些 ， 能 够 传递 如 同 宝石 一 样 炊 眼 、 迷 ; 
以 威尼斯 红 为 主 色调 ， 沉 稳 的 红色 象征 着 ; 。 人 的 感觉 。 


丰收 和 希望 | @ 在 本 例 中 ， 以 白色 为 主要 点 组 色 ， 整 个 画 | 
画面 中 以 绿色 的 玉米 地 作为 背景 ， 红 色 和 ; 。 面 干净 利落 。 | 
绿色 为 对 比 色 ， 给 人 视觉 冲击 力 。 | 


E92” 灰 玫 红 & 优 品 紫红 


灰 玫 红 没有 粉红 色 的 稚气 和 洋红 的 强势 ， ; @ 优 品 紫红 是 介 于 紫色 和 红色 的 颜色 ， 它 既 | 
却 兼 有 两 者 的 优点 ， 是 一 种 不 可 多 得 的 粉 ; 。 有 红色 的 热情 ， 又 有 紫色 的 神秘 。 : 
色 系 色彩 。 ; @ 在 该 网 页 中 ， 紧 凑 的 布局 条 理 清晰 ， 主 次 ; 
在 该 网 页 中 ， 模 拟 口腔 的 颜色 ， 单 色调 的 ; 。 分 明 。 | 
配色 方案 营造 了 一 种 舒缓 的 视觉 氛围 。 ”; @ 儿童 主题 网 站 以 该 颜色 作为 主 色调 ， 颜 色 : 
画面 风格 风趣 ， 作 为 网 站 的 首页 十 分 吸引 : 。 通过 明度 的 不 断 变换 ， 为 画面 添加 了 层 ; 


林 色 是 色彩 中 最 温暖 的 颜 
色 ， 它 在 空气 中 的 穿 透 力 仅 次 
于 红色 。 看 到 栖 色 ， 不 禁 让 人 
联想 到 硕果 囚 囚 的 秋天 ， 香 甜 
的 权 子 ， 是 一 种 充满 活力 的 颜 
色 。 橙 色 还 能 够 给 人 庄严 、 尊 
贵 、 神 秘 的 感觉 ， 所 以 在 历史 
上 ， 许 多 权贵 和 宗教 界 人 士 都 
用 以 妆 点 自己 ， 现 代 社 会 中 往 
往 作为 标志 色 和 宣传 色 。 

色彩 情感 : 温暖 、 明 亮 、 
活力 、 兴 奋 、 欢 乐 、 健康、 华丽、 
放松 、 辉 煌 、 和 舒适、 收获 陈旧、 
隐隐 、 反 抗 、 偏激 、 境 界 、 刺 激 、 
骄傲 。 


橙色 RGB=235.85,32 : 阳 橙 RGB=242.141.0 


| 橘红 RGB=255.68.10 
! 80.90.0 | 


CMYK=0.85.92.0 ! 


密林 RGB=248,122.42 查 黄 RGB=229.169.107 米色 RGB=228,204.169 ; 
CMYK=1.66.83.0 | CMYK=14.41.60.0 | CMSYK=5.46.64.0 | CMYK=14.23,36.0 


CMYK=37.53.71.0 


| ”柿子 栖 RGB-237.108.61 |!” 桨 橙色 RGB=-209.122.0 金 茶色 RGB=224.134.26 肤色 RGB=254.220.189 
CMYR=7.71.75.0 | CMYK=23.61.1000 | CMYK=16.57.93.0 | CMYK=1.20.27.0 


呐 皇 彩 概 玫 涉 喇 司 山 8 沾 生 


落 司 后 半 区 蔬 曙 办 


橘红 色 是 黄色 + 红色 ， 红 色 偏 多 一 些 ， 所 ; @ 橘 色 比 橘红 色 中 的 红色 少 一 些 。 橘 色 象征 ; 
以 橘红 色 的 视觉 冲击 力也 很 强 。 : 着 年 轻 、 开 朗 。 | 
橘红 色 能 够 给 人 一 种 新 鲜 、 活 力 的 感觉 。 ; @ 在 网 页 中 白色 背景 的 映衬 下 ， 郴 色 显得 非 ; 
网 页 选择 橘红 色 作 为 主 色调 ， 是 为 了 与 商 : 。 常 鲜艳 。 | 
品 相互 呼应 。 ; @ 网 页 中 曲线 的 模块 既 可 以 引导 视线 ， 又 可 ， 
;以 增加 画面 的 趣味 性 。 | 


橙色 代表 时 尚 、 青 春 、 动 感 ， 有 种 让 人 活 ; @ 阳 橙色 是 在 橙色 中 添加 了 白色 ， 给 人 一 种 | 

力 四 射 的 感觉 。 : 浪漫、 温暖 的 感觉。 | 

在 该 网 页 中 ， 林 色 调 的 配色 更 加 映衬 了 少 ; @ 网 页 选择 青色 为 点 缀 色 ， 目 的 是 增加 画面 ; 

女 的 活力 。 ; ”颜色 的 对 比 ， 增 加 视觉 冲击 力 。 | 

网 页 能 够 向 人 传递 健康 、 活 力 的 感觉 。 ”; @ 网 页 中 的 点 绥 色 都 为 柱 色 调 ， 这 样 保证 了 | 
| ”整个 页 面 的 色调 统一 。 


| @ 密 栓 色 纯度 低 ， 明 度 高 ， 带 有 欢乐、 


| 。 的 情感 。 
| @ 在 该 网 页 中 ， 密 橙色 为 辅助 色 。 


温暖 | @ 可 黄色 比 密 楼 色 的 明度 低 一 些 ， 可 黄色 给 ， 


人 一 种 柔和 、 知 性 的 感觉 。 


. @ 该 网 页 中 ， 单 色调 的 配色 给 人 一 种 视觉 统 | 


| @ 儿童 主题 的 网 页 设计 中 ， 采 用 窄 橙色 为 辅 ”一 之 感 。 


助 色 ， 给 人 一 种 活泼 、 健 康 的 感觉 。 


本 
- 


局 方式 ， 为 浏览 者 留 下 深刻 的 印象 。 


TASTE OF TRADITION 


沙 棕色 是 非常 i | @ 米色 颜色 非常 明亮 ， 色 彩 感觉 非常 简朴 、 


0 
| 。 柔和、 淡雅 的 感 

1@ 沙 术 措 配 深 酒 红色 为 类 似 色 的 配色 
9 


温 萄 。 


| 人 网 页 为 单 色调 的 配色 方案 , 整个 画面 优雅 、 


页 中 的 构图 非 党 简洁， 能 够 充分 体现 网 干净 。 


ET EFTTERI 


| @ 这 是 一 个 网 站 的 首页 ， 利 用 简约 时 尚 的 布 


击 要 河 闻 遍 东 明日、 


网 
页 
配 
色 
设 
计 
手 
册 


EU 一 


A 本 如 总 
ES Cf 


| @ 灰 土 色 的 色彩 饱和 度 较 低 ,给 人 一 种 宁静 、: @ 驼 色 来 源 于 苍茫 的 沙漠 、 坚 韧 的 岩石 。 给 | 
| 舒服 的 视觉 感受 。 人 一 种 淡定 、 疏 离 的 感觉 。 : 
| @ 黑色 的 导航 栏 能 够 让 整个 页 面 看 起 来 更 加 : @ 网 页 以 地 图 作为 背景 ， 主 要 是 配合 商品 的 } 
| 沉稳、 干练。 产地 。 | 
| @ 网 页 中 的 手绘 插画 增加 了 画面 中 的 艺 网 页 中 虚 化 的 背景 能 够 突出 前 景 中 的 | 


气息 。 商品 。 


3257 椰 褐 & 褐色 


| @ 椰 褐色 明度 较 低 ， 能 够 给 人 一 种 稳定 、 
| 。 靠 的 感觉 。 

| @ 网 页 采用 这 样 的 色彩 ， 主 要 是 迎合 商品 
颜色。 

| @ 页 面 中 渐变 的 色彩 似乎 在 不 断 流动 ， 让 
| 能 感受 到 商品 丝 滑 、 香 浓 的 口感 。 


褐色 常常 被 联想 到 泥土 、 自 然 、 简 朴 , 它 | 
给 人 可 靠 、 有 益 健康 和 保守 的 感觉 。 | 
该 网 页 为 中 明度 的 色彩 基调 ， 整 体 给 人 一 | 
种 民意 、 稳 定 的 感觉 。 : 
网 页 中 上 明 下 暗 的 颜色 自然 而 然 地 将 浏览 ; 
者 的 视线 向 下 引导 。 : 


8 柿子 橙 & 痊 橙 色 


ECE 


P°NGATHON 


THE ~ 
QRIGINAL 


0 术 子 档 的 上 色 来 自 于 自然, 给 给 人 一 种 香甜 、 @ 普查 色 与 橙色 相 比 显得 低调 , 它 同样 温暖 、| 


| 可口 的 感觉。 |。 亲切， 但 又 不 乏 稳重 的 感觉 。 | 
| @ 该 网 页 中 ， 以 黑色 作为 点 缀 色 ， 能 够 突出 ; @ 网 页 中 以 大 图 为 背景 ， 给 人 一 种 舒展 、 大 | 
画面 的 重点 。 | 。 方 的 感觉 。 | 


| @ 居中 的 版 面 布局 ， 是 常见 的 布局 方式 。 这 “@ 阁楼 色 的 色调 给 人 一 种 秋天 温暖、 明媚 的 | 
”种 布局 方式 工整 、 集 中 。 | 感觉 | 


| @ 金 茶色 的 明度 没有 橙色 那样 高 ， 所 以 缺少 人 @ 肤色 又 称 为 神色， 颜色 本 质 非常 的 柔和 、 
了 楼 色 张扬 的 气质 。 但 是 这 种 颜色 也 能 够 ， ”温暖 。 | 
展示 出 健康 、 活 泌 的 气质 。 | 本 例 为 儿童 主题 的 网 页 ， 选 择 肤色 作为 主 | 


1e 网 页 颜色 较为 单纯 ， 选 择 的 颜色 较 少 ， 色调 ， 能 够 非常 贴切 地 表现 出 网 页 柔软 、 


以 大 面 的 金 茶色 给 人 一 种 健康 、 全 二 的 | 安全 的 特性 。 


中 宇 盯 要 用 污 司 司 册 有 让 


ET 


黄色 是 三 原色 之 一 ， 属 高 明度 色 。 黄 色 代 表 了 太阳 的 光 与 热 ， 也 代表 着 朝气 和 和 希 


望 。 黄 色 还 具有 警告 的 作用 ， 例 如 小 学 生 的 小 黄 帽 、 黄 灯 、 警 告 牌 等 。 当 在 黄色 中 添 
加 黑色 时 ， 就 变 为 黄 褐色， 能 够 给 人 一 种 中 庸 、 儒 雅 的 感觉 ， 而 在 黄色 中 添加 白色 
时 ， 则 变 得 轻快 、 柔 软 。 

色彩 情感 : 光明 、 明 亮 、 轻快 、 光 芒 、 纯 正 、 公 正 、 幸 福 、 辉煌 、 权 利 、 开 朗 、 阳 光 、 
热 曾 、 廉 价 、 恶 俗 、 软 弱 、 吵 闲 、 色 情 、 轻 薄 。 


CMYK=2.11.35.0 


| ”卡其 黄 RGB=176.136.39 |; 含羞 草 黄 RGB-237.212.67 ; ”并 末 黄 RGB=214.197.96 | 秋 菊 色 RGB=227.220.161 | 
; CMYK-40,50.960 ; CMYK-1418.790 :; CMYK-23.22.70.0 


CMYK=16.12.44.0 


中 主 盯 要 于 污 半 司 册 8 站 


| @ 黄色 是 非常 温暖 的 颜色 ， 有 一 种 充满 希望 @) 铬 黄色 中 带 有 一 

| 。 和 活力 的 感觉 。 | 几 分 俏皮 感 。 

| @ 网 页 中 黄色 与 淡 青 色 搭配 ， 形 成 了 较为 欢 | @ 网 页 为 食品 主题 ， 采 用 黄色 调 不 仅 能 够 与 

| 。 快 的 对 比 效果 。 | 食物 的 颜色 相互 呼应 ， 还 能 够 促进 浏览 

| @ 网 页 中 采用 红色 作为 点 缀 色 ， 它 与 黄色 和 ; ”的 食欲 。 

| 。 青色 同 为 对 比 色 ， 这 样 的 配色 方法 能 够 序 | @ 网 页 以 白色 为 辅助 色 ， 能 够 体现 食品 卫 
分 展现 活 浅 、 年 轻 的 主题 。 | 的 主旨 。 


1 
4 ficient Nghting 


ep 


@ 在 古代 ， 金 色 向 来 是 皇权 的 象征 ， 金 色 给 ; @@ 香 莫 黄 中 添加 了 少许 的 白色 ， 所 以 黄色 3 


| ”人 华丽 、 高 贵 的 感觉 。 | 。 得 更 加 柔和 。 

| @ 网 页 中 以 金色 搭配 灰色 ， 能 够 让 商品 十 分 ; @ 在 网 页 中 ， 黄 色 正 圆 是 画面 的 主体 ， 它 和 
| 。” 抢眼 。 | 用 面积 及 颜色 ， 使 其 变 得 非常 抢眼。 

| @ 金色 是 非常 适合 做 点 组 色 的 颜色 。 | @ 画面 中 大 小 不 一 的 圆 形 形 成 一 条 曲线 ,i 


3.3.4 鲜 黄 & 月 光 黄 


出 司 宫 半 泌 荐 曙 办 


月 光 黄 属于 高 明度 、 低 纯度 的 颜色 ， 是 一 } 
种 绵软 、 柔 善 的 颜色 。 | 
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i 在 页 面 中 ， 鲜 黄色 的 商品 在 画面 中 非常 ; @ 网 页 以 黑色 作为 点 缀 色 ， 利 用 明度 的 强 弱 | 
| 抢眼 。 对 比 ， 让 画面 更 具 视 觉 冲击 力 。 | 


@ 网 页 中 ， 大 面积 的 留 白 增加 了 画面 的 可 | 


所 以 非常 鲜艳 ， 


| @ 柠檬 黄 中 带 有 一 点 绿色 

| 。 视觉 冲击 力 强 。 干净 ， 有 着 与 生 俱 来 的 芳香 之 感 。 | 
| @ 在 网 页 中 ， 黑 色 与 柠檬 黄 的 对 比 效果 十 分 : @ 网 页 中 的 插画 为 矢量 风格 ， 黄 色调 的 配色 ; 
| 强烈 。 使 人 产生 愉悦 之 感 。 : 


人 @ 在 网 页 中 , 除了 网 页 的 插图 , 其余 的 按钮 、: 
导航 等 都 非常 简洁 ， 这 也 说 明 网 页 能 够 化 ; 
繁 为 简 ， 主 题 明确 。 | 


| 人 @ 该 网 页 模块 分 割 清晰 ， 简 单 明了 。 


香槟 黄 & 奶 黄 


ww 


a 
We have MOVED Pe 要 


yyve YY py 


一 听 到 奶 黄色 这 个 名 词 ， 就 不 禁 与 香 、 甜 、 
丝 滑 这 样 的 词语 联系 到 一 起 。 | 
网 页 中 柔和 的 色调 ， 能 够 充分 体现 对 小 | 
| 
| 


视觉 的 统一 感 ， 又 不 失 颜色 的 变化 。 动物 的 怜爱 。 
| @ 画面 中 几 点 红色 鲜明 、 大 胆 ， 使 图 得 
| 。 生机 吉 勃 。 


黄 褐色 为 中 明度 、 低 纯度 的 颜色 ， 有 站 


，@ 土著 黄 有 着 浓 浓 的 。 “复古 ”韵味 ， 象 征 


| 。 儒雅、 中 良 、 刚 正 不 阿 。 年 人 的 沉稳 、 含 蕾 和 平静 。 

| @ 土著 黄色 的 背景 为 网 页 增添 了 成 熟 、 稳 在 该 网 页 中 ， 添 加 了 橘红 色调 的 装饰 ， 所 | 
;的 视觉 印象。 以 整个 页 面 并 不 沉闷 。 | 
| 人 @ 白色 的 导航 栏 及 文字 ， 可 以 用 来 提高 网 


的 明度 。 
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3:3:8 卡其 黄 & 含羞 草 黄 


“卡其 ”一 词 源 自 波斯 语 ， 有 “灰尘 ”、 含羞 草 黄 是 一 种 明亮 的 黄色 ， 具 有 一 种 欢 ; 
“尘土 ”的 意思 ， 卡 其 黄 具有 黄色 倾向 。 ; 。 乐 、 俏 皮 的 感觉 。 | 
在 网 页 中 由 深 至 浅 的 颜色 变化 能 够 使 人 的 ; @@ 在 网 页 中 ， 含 羞 草 黄 是 辅助 色 ， 它 与 黑色 ; 


视线 集中 到 一 点 。 | 形成 了 强烈 的 明暗 对 比 。 | 
食品 网 页 设计 以 该 色调 作为 主 色调 ， 能 够 ; @ 黄色 为 前 进 色 ， 所 以 在 整个 画面 中 显得 非 
突出 食品 的 品质 。 | 常 突出 。 | 


3.3.9 黄 & 秋 菊 色 


下 让 二 同人 全 
WHISKERED 


芥末 黄 中 带 有 一 点 点 绿色 ， 为 暖色 调 。 该 ; @ 秋 菊 色 是 一 种 高 明度 色彩 ， 所 表现 出 来 的 ; 
颜色 微微 地 偏 灰色 调 ， 所 以 视觉 效果 非常 ; 。 视觉 效果 是 了 明快、 简捷、 温和 、 素 雅 。  : 
柔和 。 i @ 秋 菊 色 的 视觉 效果 较 轻 ， 所 以 该 网 页 也 传 | 
该 网 页 以 芥末 黄 作为 背景 ， 并 且 没有 十 分 ; 。 达 了 这 种 轻柔 的 视觉 感受 。 | 
强烈 的 配色 ， 所 以 整个 画面 的 视觉 效果 非 ; 人 @ 这 种 去 繁 就 简 的 网 页 设计 ， 是 现代 设计 师 ; 
常 柔和 。 ; 非常 推崇 的 。 | 


区 


3.4.1 只 绿 


绿色 是 非常 清 青 新 、 自然 的 颜色 ， 它 来 自 于 自然 界 。 看 见 绿色 ， 总 是 能 够 让 人 们 想 
到 生机 勃勃 的 春天 、 清 新 宁静 
的 木林、 健康 的 蔬果 。 
从 心理 上 讲 ， 绿 色 会 让 人 
心态 平和 ， 给 人 松弛 、 放 松 的 
感觉 。 在 绿色 中 添加 些 黄色 ， 
颜色 变 得 鲜嫩 ， 就 像 新 抽 芽 
的 柳 枝 ; 在 绿色 中 添加 蓝 色 ， 
颜色 则 变 得 清秀 、 移 达 。 
色彩 情感 ， 和平、 宁静、 


中 宇 上 膝下 用 涉 司 司 册 8 汐 


轻松 自然 .环保 生命、 成 长 、 
生机 希望 青春 、 清 秀 、 蔬 达 、 


健康 、 清 痰 、 明 媚 、 鲜 活 、 土 气 、 
庸俗 、 愚 钝 、 沉 问 。 


黄 绿 RGB=216.230.0 ”苹果 绿 RGB=158.189.25 ， =205.237, 叶 绿 RGB=135.162.86 
CMYK=25.0.90.0 | CMYK=47.14.98, KC: ly 


草绿 RGB=170.196.104 苔 葵 绿 RGB=136.134. ! 芥末 绿 RGB=183.186.107 
CMYK=42.13.70.0 CMYK=46.45.93.1 ! CMYK=36.22.66.0 


橄 槛 绿 RGB=98.90.5 
CMYK=66.60.100.22 


枯 叶 绿 RGB=174.186.127 牧 绿 RGB=21.174.105 绿 松石 绿 RGB=66.171.145 
CMYK=39.21.57.0 | CMYK=75.8.75.0 | CMYK=71.15.52.0 


青瓷 绿 RGB=123.185,155 
CMYK=56.13.47.0 


孔雀 绿 RGB=0.128.119 
CMYK=85.40.58.1 


孔雀 石 绿 RGB=0.142.87 铬 绿 RGB=0.101.80 
CMYK=82.29.82.0 CMYK=89.51.77.13 


销 绿 RGB=106.189.120 
CMYK=62.6.66.0 
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黄 绿色 性 情 温和 ， 是 春天 的 颜色 ， 代 表 着 苹果 绿 是 非常 清 甜 的 颜色 ， 能 够 让 人 联想 ; 
无 限 的 生机 和 希望。 i 到 青 苹果 甜 中 带 酸 的 口感 。 | 
网 页 中 咖啡 色 与 黄 绿色 搭配 ， 这 种 在 颜色 ; @ 在 网 页 中 ， 图 片 形成 节奏 上 虚实 和 琉 密 的 ; 
上 明 与 暗 、 浊 与 清 的 对 比 ， 形 成 了 颜色 碰 ; 。 对 比 ， 使 得 整个 画面 既 有 曲线 带 来 的 张力 ; 
撞 的 火花 。 : ”和 动感 ， 又 不 乏 整体 的 稳固 和 均衡 。 | 
在 网 页 中 ， 图 案 和 文字 的 搭配 和 有 效 的 穿 ; @ 网 页 以 大 图 为 主体 ， 非 常 直观 、 了 明确 。 

插 ， 能 使 页 面 除了 信息 传达 外 ， 更 具 层次 ; 

感 和 观赏 性 。 : 


嫩绿 色 是 一 种 非常 清新 、 自 然 的 颜色 ， 它 @ 叶 绿 色 是 夏天 的 颜色 ， 睛 色 鲜亮 中 适 着 几 | 


来 自 春 天 ， 来 自 自 然 。 | 分 深沉 。 : 
网 页 中 的 颜色 单纯 ， 单 色调 的 配色 方案 韵 ; @ 网 页 中 分 为 左右 两 处 ， 左 侧 为 网 页 的 重要 ; 


律 平缓 。 | 信息 ， 右 侧 为 播放 器 ， 这 样 的 布局 使 得 整 ; 
网 页 中 ， 背 景 颜色 有 轻微 的 变化 ， 不 会 会 使 : 个 页 面 既 有 亮点 又 不 失 简 洁 。 | 
画面 显得 枯燥 、 单 调 。 
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| @ 草绿 色 清新 亮丽 ， 

| 的 视觉 感受 ， 具 有 较 强 的 视觉 冲击 力 。 ”; ” 郁 的 感觉 。 | 
| @ 在 该 网 页 中 , 圆 角 矩 形 和 贺 形 的 穿插 结合 ，; @ 该 网 页 中 ， 苔 声 绿 只 作为 点 绥 色 ， 在 这 样 | 
| ”色彩 填充 的 图 形 交集 ， 既 能 展示 重要 信 ; 干净、 简洁 的 网 页 中 ， 显 得 非常 低调 。 


| 。 息 ， 又 勾勒 出 整个 网 站 的 风格 形态 。 。 | @ 网 页 布局 紧凑 ， 张 弛 有 度 ， 文 字 和 图 案 的 | 
| @ 作为 与 健康 相关 的 网 页 ， 选 择 草绿 色 作为 ， 。 结合 使 得 条 理 非常 清晰 。 : 


3.4.5 芥末 绿 & 橄榄 绿 


: @ 芥 未 绿 颜色 纯度 较 低 ， 而 且 色 调 偏 灰 ， 所 : @@ 橄榄 绿 颜色 明度 较 低 ， 此 在 颜色 在 低调 中 | 


| ”以 给 人 一 种 平缓 、 温 柔 的 感觉 。 | ”有 几 分 骄傲 。 | 
| @ 网 页 中 是 统一 的 绿色 ， 通 过 颜色 的 变化 增 ;人 @ 在 该 网 页 中 ， 通 过 不 同 的 颜色 来 划分 网 页 ， 
| 加 画面 的 层次 感 。 | 区域， 整个 页 面 层 次 分 明 。 | 
| @ 网 页 中 飞 动 的 元 素 也 为 画面 添加 了 动感 。 ; @@ 该 网 页 采用 单 色调 的 配色 ,在 视觉 上 营造 | 
| | 出 平衡 之 感 。 | 
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a 
顾名思义 ， 村 叶 绿 的 颜色 源 于 秋天 枯 著 的 | 全 绿色 是 绿色 中 带 有 青色 ， 所 以 得 绿色 不 | 
绿叶 , 是 一 种 中 性 色 , 视觉 感受 非常 舒缓 、 仅 有 绿色 的 自然 清新 ， 又 不 乏 俏 皮 、 活 滩 : 
平稳 ， 其 中 不 乏 黯 淡 、 消 沉 之 感 。 : 的 感觉 。 : 
该 网 页 呈现 柔和 的 灰色 调 ， 而 且 在 网 页 中 ; i 网 页 中 ， 契 绿色 为 背景 颜色 ， 用 大 面积 的 : 
有 枯 叶 绿 作为 主导 色 ， 整个 页 面 显得 非常 颜色 抢占 先 机 。 | 
淡雅 。 

@ 该 网 页 上 方 为 图 案 ， 下 方 为 细节 ， 这 样 的 
网 页 布局 虽然 保守 ， 但 是 非常 实用 。 : i 


串 州 圭 扎 只 型 六 司 


绿 松 石 绿 是 来 自 宝石 的 颜色 ， 这 种 颜色 能 ; @ 青瓷 绿 的 色彩 纯度 低 ， 颜 色 呈 灰色 调 ， 
够 让 人 联想 到 精美 的 宝石 、 热 带 平静 的 水 ; 。 有 着 洗 尽 铅 华 、 古 朴 典雅 的 气质 。 | 
域 ， 是 令 人 激动 的 、 明 亮 的 颜色 。 i @ 网 页 构图 非常 简单 , 内 容 都 集中 在 模块 中 ，| 
在 该 网 页 中 ， 三 角形 的 构图 方式 不 仅 构图 | 。 而 网 页 标志 破 框 而 出 ， 就 变 得 格外 突出 。 | 
稳定 ， 视 党 上 的 感官 延续 让 页 面 脉络 清 ; 


= ) | 。 晰 、 不 脱节 ， 且 富有 节奏 感 。 | | 


区 皇上 肝 要 用 污 导 司 册 8 站 


YY AA 月， 
| 。 兴奋 的 颜色 。 种 深沉 、 浑 厚 的 感觉。 
| @ 在 该 网 页 中 ， 孔 省 石 绿 只 作为 点 组 色 ， 它 ， @ 网 页 属于 单 色调 的 配色 方案 ， 整 个 画面 
| 与 背景 形成 强烈 的 对 比 。 | 色 统一 ， 又 不 失 变化 。 
| @ 网 页 内 容 丰 富 , 利用 颜色 区 分 信息 的 主 次 。; 
”这 样 的 方式 既 能 展示 重要 信息 ， 又 勾勒 出 ， 
整个 网 站 的 风格 形态 。 


| @ 也 淮 绿 的 颜色 来 自 孔 淮 的 羽毛 ， 这 种 颜色 @ 钴 绿色 颜色 明度 相对 较 高 ， 当 这 种 颜色 
| 华丽 、 冷 艳 ， 透 着 神秘 感 。 | 积 较 大 时 ， 使 人 心里 安静 、 恬 静 ， 当 颜 
| @ 该 网 页 将 模块 整齐 划分 ， 条 理 清晰 ， 让 人 ; ”面积 较 小 时 ， 则 非常 活 浅 、 年 轻 态 。 
| 过目 难 忘 。 | 在 前 景 中 钴 绿 
| @ 该 网 页 以 灰色 搭配 孔 誉 绿 ， 颜 色 明暗 、 纯 ; 非常 跳跃 ， 能 够 让 前 景 非常 突出 。 

度 的 对 比较 弱 ， 这 样 的 颜色 搭配 给 人 一 种 ， 人 @ 前 景 中 国 形 的 模块 饱满 、 圆 润 , 富有 张力 


| 办 区 、 寄 因 的 视 % 民 有 个 


击 否 淋 手记 东明 上 日. 


3.5.1 


青色 是 介 于 绿色 和 蓝 色 之 间 的 颜色 ， 是 天 空 和 大 海 的 颜色 。 在 中 


国 古 代 社 会 中 ， 


青色 具有 极其 重要 的 意义 , 传统 的 器 物 和 服饰 常常 采用 青色 。 当 在 青色 中 添加 白色 时 ， 


颜色 变 得 清凉 、 欢 快 ， 当 在 青色 中 添加 


黑色 时 ， 上 暗色 变 得 深沉 、 冷 静 。 


色彩 情感 : 清脆 、 伶俐 、 欢 快 、 劲 爽 、 淡雅、 安静、 沉稳、 踏实、 内 涵 、 广 阔 、 童真、 
亲切 、 乐 观 、 柔 和 、 磊 落 、 深 痊 、 科 技 、 阴 险 、 消 极 、 沉 静 、 冰 冷 、 沉 间 、 华 而 不 实 。 


青色 RGB=0,255,255 
CMYR=: 


铁 青色 RGB=82. 
CMYK=8: 


深 青色 RGB=0.78.120 
CMYK=96.74.40.3 


HENDNONENT 


MORGAN 


i @ 青色 颜色 干净 ， 纯 度 比较 高 ， 所 以 容易 
| 。 引 眼 球 。 | 。 静 、 深 沉 的 青色 。 | 
| @ 这 是 一 个 医疗 主题 的 网 页 设计 ， 青 色 的 背 ; @ 该 网 站 为 家 居 主 题 的 网 页 设计 ， 选 择 铁 青 | 

景 搭配 上 白色 ， 整 个 画面 干净 、 清 严 ， 给 ; 。“ 色 作为 主 色调 ， 并 不 会 显得 沉闷 ， 而 是 显 ; 
| ”人 一 种 值得 信赖 的 感觉 。 | 示 出 了 正式 场合 应 有 的 严肃。 | 
| @ 在 页 面 中 ， 人 物 手指 的 指向 是 网 页 的 重要 ; @ 网 页 中 图 案 的 面积 较 大 ， 所 以 更 容易 吸引 | 
i 信息 ， 在 视觉 上 起 引导 的 作用 。 注意 力 。 | 


@ 铁 青 色 属于 低 明 度 的 色彩 基调 ， 是 


| @ 深 青 色 颜 色 比较 暗 ， 大 面积 使 用 会 显得 沉 ， 人 @ 天 青色 是 天 空 的 颜色 ， 让 人 联想 到 万 里 无 
闽 ， 所 以 在 该 网 页 中 以 自 色 为 主 色调 ， 只 ，。 云 的 睛 空 ， 是 让 人 心情 愉快 的 颜色 。 | 


| 。 是 用 了 深 青 色 作 为 辅助 色 。 | @ 在 该 网 页 中 ， 以 天 青色 为 主 色调 ， 整 个 画 
| @ 该 网 页 属于 门户 网 站 ， 深 青色 能 够 让 整个 。 。 面 给 人 一 种 冰 爽 、 清 凉 、 纯 净 的 感觉 。 
| 。 网 页 看 起 来 更 加 严肃 、 庄 重 。 | @ 该 网 页 采用 中 轴 型 的 布局 方式 ， 在 网 页 中 | 


i@ 在 这 个 网 页 中 ， 文 字 信息 较 多 ， 所 以 没有 | 将 图 片 和 文字 以 垂直 方向 排列 ， 给 人 稳 | 
较 多 的 装饰 ， 在 排版 上 比较 整齐 。 定 、 平 静 、 含 蕾 的 感觉 。 : 


后 


中 总 有 麻 号 半 注 辣 避 册 8 汶 


而 要 河 闻 遍 荡 骨 卓 、 
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这 是 一 个 以 科技 为 主题 的 网 页 设计 ， 以 石 ; 
青色 作为 主 色调 ， 首 先 营造 了 一 种 冷静 、 | 
严肃 的 气氛 ， 然 后 搭配 白色 和 人 少量 的 灰 | 
色 ， 使 页 面 干 净 、 整 洁 。 | 
该 网 页 的 布局 方式 较为 简约 ， 规 划 整齐 ， 

方便 浏览 者 使 用 。 


| @ 群 青色 颜色 更 加 偏向 蓝 色 ， 该 颜色 比较 名 

| 。 艳 ， 视 觉 感受 上 比较 诚 奶 、 真 诚 。 

| @ 在 该 网 页 中 ， 以 天 空 作 为 背景 ， 给 人 以 
间 上 的 延伸 感 。 

| @ 画面 以 群 青色 为 主 色调 ， 在 点 缀 色 的 先 

| 上 比较 丰富 ， 画 面 生动 有 趣 。 


We help our clients thrive in a 
connected world with products, 
services and platforms that transform 
the consumer experience. 


@ 青绿 色 中 绿色 的 含量 多 一 些 ， 所 以 颜色 
感 党 上 没有 那么 清爽 ， 反 倒是 给 人 一 种 ; 

| ” 新、 灵活、 生动 的 视觉 感受 。 

| @ 该 网 页 属于 “标题 正文 型 ”的 布局 方式 ， 

| 在 网 页 的 上 方 有 重要 的 网 页 信息 ， 而 且 

处 以 青绿 色 作为 背景 颜色 ， 能 够 很 好 地 有 

出 主体 。 


青 蓝 色 的 颜色 纯度 不 高 ， 稍 微 有 些 偏 灰 ， 
所 以 带 有 一 丝 忧郁 之 感 。 | 
在 该 网 页 中 ， 以 青 蓝 色 为 主 色 ， 并 以 其 他 : 
青色 作为 辅助 主 色 ， 根 据 色 块 的 明暗 变化 ; 
为 画面 添加 颜色 所 带 来 的 动感 。 | 
这 是 网 站 的 首页 ， 这 样 新 颖 、 活 泌 的 表现 ; 
方式 ， 更 容易 吸引 用 户 的 注意 : 


| @ 资 青 色 晶莹 纯净 ， 像 瓷器 一 样 透 着 婉约 、 ; @ 淡 青 色 颜色 明度 很 高 , 该 颜色 干净 、 清洁 


| 。 冰凉 的 感觉。 没有 一 点 杂质 。 
| @ 在 网 页 中 采用 橙色 及 黄色 作为 点 缀 色 ， 它 | 人 @ 在 这 个 网 页 中 ， 以 淡 青 色 为 主 色调 ， 整 


与 瓷 青色 为 对 比 色 ， 由 于 点 组 色 的 面积 较 页 面 清新 、 可 爱 ， 作 为 一 个 针对 年 轻 女 | 
小 , 所 以 画面 中 既 有 对 比 , 又 不 显得 杂乱 。 的 网 页 ， 这 样 的 色调 还 是 非常 得 体 的 。 
ie 网 页 为 “标题 型 ”布局 方式 ， 以 商品 为 


-个 页 面 的 主体 作 


白色 更 多 一 些 ， 它 有 点 偏 灰 。 这 样 的 颜色 ; 。 色 为 中 明度 ， 颜 色 纯 度 也 较 低 ， 所 以 给 
| 清新 之 余 透 着 柔和 。 | 一 种 朴素 、 禅 意 的 视觉 感受 。 

| @ 该 网 页 以 白 青色 为 主 色调 ， 而 网 页 中 的 图 ; @ 该 网 页 设计 较为 独特 , 它 将 画面 一 分 为 二 

， 。 像 大 多 都 是 蔬菜 ， 通 过 这 两 种 元 素 向 人 们 ， 。 当 用 户 打开 网 页 后 ， 先 注意 到 的 是 中 轴 

传递 健康 、 绿 色 的 主题 。 | 以 及 上 方 的 文字 ， 然 后 才 会 欣赏 左 侧 的 

i 案 ,， 接着 由 图 案 将 视线 引导 向 右 侧 的 商 析 

及 文字 说 明 ， 这 样 的 布局 方式 新 颖 独特 ， 


路 吝 麻 号 半 注 辣 避 届 E 溃 


东 豆 后 字 区 荐 归 内- 


串 州 手 扎 只 型 昼 习 


8 水 青 & 藏青 


RFDA 


明净 ， 能 够 让 人 联 9 颜色 ， 其 颜色 了 明度 甸 
| 一 汪清 泉 ， 背 景 为 梦幻 冰川 世界 。 低 ， 是 代表 男士 的 颜色 。 它 通常 象征 着 理 | 
| @ 该 网 页 为 单 色 调 的 配色 方案 ， 同 颜色 智 、 勇 敢 、 坚 强 。 

i 到 浅 的 变化 为 画面 营造 空间 感 。 而 且 以 冰 ; @ 该 网 页 以 大 图 为 主 ， 并 添加 了 有 说 服 力 的 ; 

为 图 案 ， 为 画面 营造 了 冰凉 、 唯 美 、 神 和 标题 ， 让 人 记忆 深刻 。 | 
: 的 氛围 。 人 @ 深 色调 在 网 页 设计 中 应 用 范围 较 小 ， 所 以 : 
| @ 画面 中 跳跃 的 舞 者 正 是 朝 着 文字 的 方向 ， 只 要 运用 得 当 ， 深 色调 更 容易 吸引 、 打 动 | 
| “一 方面 为 画面 营造 动感 ， 另 一 方面 可 以 将 广大 浏览 者 。 不 仅 如 此 ， 深 色调 更 能 给 人 | 
们 的 视线 向 文字 方向 引导 ， 一 种 品质 、 奢 华 、 低 调 的 视觉 感受 。 ! 


可 以 一 举 两 得 。 


全 竺 计 人 | 虱 唱 寺 公 A 对 


al 


[3 


5 下 大生 | 


感觉 更 倾向 于 绿色 ， 是 一 种 


傲 、 超然 的 颜色 ,也 是 很 有 民族 色彩 的 颜色 中 透 着 些许 的 青色 ， 也 通 着 一 丝 绿 
让 人 看 着 舒服 且 带 着 神秘 感 的 颜色 。 


| @ 在 该 网 页 中 ， 清 澜 青 在 白色 背景 
| 显得 与 众 不 同 。 它 让 人 觉得 这 个 颜色 
应 该 属于 食物 包装 的 颜色 ， 就 是 这 种 “ 
应 该 ”， 又 让 人 觉得 非常 独特 ， 使 人 过 


人 @ 在 该 页 面 中 ， 背 景 颜色 柔和 且 富有 变化 ， 
既 美观 ， 又 不 会 抢夺 前 景 的 风头 。 

全 画面 中 图 文 结合 ， 既 充分 展示 了 商品 ， 又 

对 商品 进行 了 详尽 解说 ， 二 者 配合 默契 。 


Eo 
[af 


蓝 色 是 冷色 调 ， 是 男性 的 代表 颜色 。 蓝 色 通 常 让 人 联想 到 海洋 、 天 空 、 水 、 宇 
宙 、 冰 川 。 高 纯度 的 蓝 色 给 人 鲜 活 、 理 智 、 广 阔 、 魅 力 的 视觉 感受 。 当 在 蓝 色 中 添加 
了 白色 后 ， 会 给 人 阳光 、 IT 
自由 的 感觉 ， 白 色 的 含量 EE 
越 多 ， 颜 色 会 变 得 越 来 
越 轻柔 ， 越 来 越 可 爱 、 活 
泌 。 当 在 蓝 色 中 添加 黑色 
后 ， 颜 色 会 变 得 越 来 越 浑 字 。。。 术 力 JX 工 yO 机 品 51 族 
浊 ， 感 觉 越 来 越 稳 重 、 沉 弄 品 -开放 五 情 地 专 世 拉 闪 
着 。 在 网 页 设计 中 ， 强 调 
科技 、 效 率 的 商品 或 企业 
形象 ， 大 多 选用 蓝 色 。 

色彩 情感 : 纯净 、 美 
丽 、 冷 静 、 理 智 、 平 静 、 
安详 、 广 阔 、 沉 稳 、 商 
务 、 忧 郁 、 户 伤 、 深 沉 、 
稳定 、 镇 静 、 文 雅 、 勇 
气 、 坚 毅 、 保 守 、 无 情 、 


区 宇 歧 要 于 涉 导 司 册 有 站 


| 矢 车 菊 蓝 RGB= 
|! CMYK=6438.0 


蓝 黑色 RGB=0.14.42 
CMYK=100.99.66.57 


击 可 河 字 遍 藻 骨 卓 、 
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| @ 高 纯度 的 蓝 色 颜色 鲜艳 ， 给 人 时 尚 、 摩 
| 的 感觉。 

| @ 在 该 网 页 中 ， 蓝 色 与 背景 颜色 形成 鲜明 
| 对比， 从 而 使 主体 突出 。 

| @ 在 该 网 页 中 ， 画 面 被 整齐 划分 ， 简 洁 


天 蓝 色 是 天 空 的 颜色 ， 是 我 们 生活 中 常见 | 
的 颜色 。 天 蓝 色 通常 给 人 豁达 、 开 阔 的 | 
感觉 。 | 
该 网 页 改 用 对 比 色 的 配色 ， 以 天 蓝 色 作为 } 
主 色 调 ， 搭 配 少许 红色 ， 形 成 了 鲜明 的 ; 
对 比 。 : 


| @ 前 蔓 色 空灵 、 湾流 、 了 明净、 高远。 
| @ 该 网 页 是 商品 促销 网 页 ， 以 大 面积 的 网 贡 
| 广告 为 视觉 中 心 ， 可 以 起 到 吸引 消费 者 ; 
| 意 的 目的 。 

19 网 页 中 将 蓝 色 措 配 上 和 白色， 使 整个 页 面 


普鲁士 蓝 为 暗色 调 ， 颜 色 深沉 、 内 仇 。 | 
在 这 个 网 页 中 ， 有 精细 的 网 页 布局 ， 强 烈 ; 
而 现代 的 图 形 和 有 趣 的 背景 ， 共 同 构成 了 ; 


3.6.4 矢 车 菊 蓝 & 深蓝 


趴 主 盯 否 用 涉 司 司 需 E 洲 


| @ 矢 车 菊 蓝 拥有 一 种 膛 有 的 蓝 色 ， 给 人 以 天 ; @ 深蓝 是 十 分 美丽 的 颜色 ， 它 神秘 而 深 之 ， 
| 。 笋 绒 般 的 独特 质感 。 | 有 着 贵族 般 的 华丽 。 | 
i @ 该 网 页 为 灰色 调 的 配色 ， 淡 灰色 的 背景 搭 ; @ 网 页 以 商品 包装 作为 主 色调 ， 这 样 的 设计 | 
| 。 配 矢 车 菊 蓝 ， 整 个 画面 营造 了 一 种 舒缓 、 ; ”一 方面 是 追求 画面 颜色 的 统一 ， 另 一 方面 | 
| 低调 的 气氛 。 | 能够 让 受众 看 到 深蓝 色 就 想到 该 商品 。 
| @ 该 网 页 采用 “ 国 ” 字 型 的 布局 方式 ， 整 个 ; @ 这 个 网 页 是 “标题 正文 型 ”的 布局 方式 ， | 
| 网 页 规范 、 条 理 清晰 。 | 商品 位 于 画面 的 中 心 ， 起 到 了 介绍 商品 的 
作用 。 | 


ENGLISH 
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We are a boutique digital design studio based in 
: 。 sydney. we craftidentity, digital and print together 
国 。 to create beautiful and cohesive visual experiences 


| @ 道奇 蓝 颜 色 美丽 、 文 静 、 理 智 、 洁 净 。 | @ 宝石 下 是 很 眼 的 上 色 ， 它 色 泽 纯 透 鲜艳 、 | 
| @ 在 该 网 页 中 ， 大 面积 的 留 白 看 似 牺牲 了 很 ”典雅 高 | 
| 。 多 屏幕 空间 ， 实 则 是 将 焦点 汇聚 在 内 容 信 | @ 在 这 个 网 页 中 ， 白色 的 文字 与 背景 形成 对 | 

息 上 。 : 比 , 拉 开 了 与 背景 的 距离 , 使 文字 变 得 突出 。; 
| @ 该 网 页 属于 简约 型 的 设计 方式 ， 成 段 的 白 | 


| 、 。 色 文 字 变 得 非常 引 人 注 目 。 | 全 


3.6.6 


Create Smart 1ife. 


示 司 可 半 泌 荐 曙 办 


| 
配 
色 | @ 午夜 蓝 的 颜色 像 深夜 的 天 空 ， 带 有 神秘 、 | @ 皇室 蓝 被 广泛 地 使 用 于 欧洲 王室 的 微 纹 、 
计 | 诡异 的 感觉 。 防御 性 武器 或 服装 上 ， 因 此 而 得 名 。 | 
手 | @ 这 是 一 个 网 站 的 首页 ， 页 面 以 半 透 明 的 大 ; @ 该 网 页 是 食物 主题 的 网 页 设计 ， 以 皇室 蓝 : 
册 ， 。 图 作为 背景 ， 给 人 一 种 开阔 、 和 舒展、 延伸 ; 。 作为 背景 ， 主 要 是 为 了 打造 一 种 甜美 的 少 } 


| 。 的 视觉 感受 。 
| @ 该 网 页 为 单 色 配 色 ， 由 午夜 蓝 延伸 到 更 ; 
| 。 的 蓝 色 ， 这 样 颜色 的 变化 能 够 让 人 的 视 
向 画面 中 心 聚集 。 


女 风格 。 | 
@@ 网 页 的 导航 栏 为 黑色 ， 这 样 的 设计 主要 是 ; 
ST A | 


@ 浓 蓝 色 颜色 较 深 ， 该 颜 、 色 颜 色 了 明度 低 ， 代 表 着 勇 
安稳 。 、 永 不 言 弃 的 含义 。 

| @ 该 网 页 以 浓 蓝 色 作为 海底 的 色调 ， 深 之 该 网 页 中 ， 左 侧 为 浅 色 ， 右 侧 为 深 色 ， 这 

i ”颜色 泻 染 了 海底 的 氛围 。 样 的 搭配 使 画面 产生 了 明显 的 对 比 效果 。 | 

@@ 在 这 个 页 面 中 ， 暗 角 的 处 理 、 颜 色 的 变 f 在 画面 中 , 左 侧 呈现 静态 , 右 侧 呈 现 动态 ，; 

让 画面 产生 了 空间 延伸 的 效果 。 人 的 视线 从 左 至 右 ， 能 够 更 加 全 面 地 观察 | 


| 


3.6.8 爱丽 丝 蓝 & 水 晶 蓝 


0 要 而 上 是 一 条 的 基色， 在 这 个 ， | | @ 水 晶 蓝 是 一 种 浅 而 吻 透 的 蓝 色 ， 颜 色 非 


| 页 中 ， 背 景色 采用 了 爱丽 丝 蓝 。 | 轻盈、 纯粹 。 
i rerio 青 蓝 色色 调 | | @ 在 该 页 面 中 , 以 大 面积 的 水 晶 蓝 作为 背景 
| ”的 配色 ， 非 常 契 合 网 页 的 主题 。 | 为 画面 营造 了 透明 、 梦 幻 的 意境 。 


| @ 该 网 页 为 “ 口 ” 字 型 布局 方式 ， 中 间 为 包 
| 。 意图 案 ， 四 周 为 文字 信息 ， 这 样 的 布局 方 | 
式 使 页 面 充 实 、 内 容 丰 富 。 | 


i 孔 淮 蓝 像 孔 省 羽毛 一 样 ， 非 党 而- 该 颜 ; @ 水 墨 蓝 颜色 纯度 较 低 ， 偏 灰 调 ， 


， 。 色 颖 艳 中 适 着 诡异 ， 是 非常 善 变 的 颜色 。 ”严谨 、 酒 脱 的 感觉 。 
| @ 在 该 网 页 中 ， 灰 色 搭配 了 妖艳 孔 洗 蓝 ， 颜 色 | @ 在 该 网 页 中 ， 以 花纹 进行 网 页 的 装饰 ， 
”的 对 比 为 画面 营造 了 旷 达 、 澎 洲 的 意境 。 ” ， 。 于 饮品 而 言 ， 这 样 的 设计 非常 特别 ， 所 


| @ 在 该 网 页 中 ， 网 页 左 侧 布局 非常 规则 ， 右 ，。 会 给 人 留 下 深刻 的 印象。 
| 。 侧 的 花纹 呈现 出 流动 之 态 ， 画 面 动静 结 | 人 @ 画面 中 的 花纹 图 案 古 朴 、 雅 致 ， 配 合 特 
合 ， 张 池 有 度 。 ”的 网 页 布局 ， 显 得 简洁 雅 至 、 干 净利 落 。 
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紫色 是 红色 和 蓝 色 混合 而 成 的 颜色 ， 这 是 构成 它 复杂 性 格 的 基础 。 紫 色 是 属于 贵 
族 的 颜色 ， 在 我 国 古代 ， 紫 
色 代 表 了 富贵 吉祥 。 当 紫色 
中 蓝 色 的 含量 变 多 后 ， 颜 色 A GREAT WAY TO 
会 变 得 非常 深 窒 、 冰 冷 ; 当 SARS 
紫色 中 红色 的 含量 变 多 后 ， 
颜色 会 慢 慢 变 暖 ， 会 显得 女 


色彩 情感 : 优雅 、 高 贵 、 
、 昂 贵 、 神 圣 、 


芬芳 、 慈 爱 、 力 量 、 自 傲 、 


泪 


敏感 、 内 向 、 虚 诚 、 和 柔美 、 
动人 、 细 腻 、 财 富 、 沉 静 、 
冰冷 、 严 厉 、 距 离 、 神 秘 、 


紫 RGB=102.0.255 i 淡 紫 色 RGB=227.209.254 i; ”靛青 色 RGB=75.0.130 ”; 。” 紫 荐 RGB=141.74.187 
CMYK=81.79.0.0 ! CMYK=15.22.0.0 | ! CMYK=61,78,0,0 


木 模 紫 RGB=124.80.157 夭 荷 色 RGB=216.191.206 丁香 紫 RGB=187.161.203 
CMYK=63,77,8,0 | CMYK=18.29.13.0 | CMYK=32.41.4.0 


三 色 董 紫 RGB=139.0.98 
CMYK=59.100.42. 


1 浇 灰 紫 RGB=157.137.157 ! 江 户 紫 RGB=111.89.156 ”; 蝴蝶 花 紫 RGB=166.1.116 ! 
CMYK=46.49,28.0 | CMYK=68,71.14.0 i CMYK=46.100,260 | 


} 锦 葵 紫 RGB-211.105.164 1 谈 紫 丁香 RGB=237.224.230 } 
| i CMYK=8.15.6.0 


矿 紫 RGB=172.135.164 


赣 薇 紫 RGB=214,153.186 ! 
CMSYK=20.49.10.0 
A 
¢ 四 


区 


趴 主 盯 否 玫 水 司 司 山 8 滤 


| 。 代表 着 优雅 与 高 贵 。 | @ 在 该 网 页 中 ,颜色 采用 由 深 至 浅 的 变化 ， 
| @ 该 网 页 中 采用 单 色调 的 配色 ， 它 以 紫色 为 ”这 种 颜色 变化 可 以 引导 人 的 视线 由 上 
， 。 主 色调 ， 同 时 搭配 深浅 变化 ， 而 求 得 协调 。 下 流动 。 

| 。 关系 。 | @ 该 网 页 为 “ 口 ” 字 型 布局 方式 ， 采 用 这 
| @ 该 网 页 为 标题 正文 型 的 网 页 布局 ， 是 一 种 ”布局 方式 ， 让 信息 繁杂 的 页 面 变 得 条 
| 简单 直 白 的 表达 方式 。 


7 


EEC 


神秘 性 格 ， 时 尚 前 卫 。 时 ， 不 禁 让 人 联想 到 花朵 的 芬芳 ， 
| @ 在 网 页 中 ， 采 用 对 比 色 的 配色 方案 ， 以 大 | 美丽、 优雅 的 颜色 。 
”面积 的 靛青 色 为 主 色调 ， 然 后 搭配 低 纯度 ， @ 该 网 页 为 单 色调 的 配色 , 通过 颜色 的 变化 
的 黄色 ， 这 样 的 配色 既 活 浅 风 趣 ， 又 不 会 。 为 画面 营造 了 一 种 梦幻 、 空 灵 的 意境 。 
| 。 有 过 于 刺激 、 急 躁 的 感觉。 | @ 该 作品 构图 简单 ， 标 题 文字 醒目 ， 网 页 上 
| @ 该 网 页 以 “ 圆 ”为 视觉 元 素 ， 除 营造 了 网 ; 。 主题 非常 明确 。 
| 。 站 富有 节奏 的 主体 形状 外 ， 还 利用 线条 加 | 
强 了 页 面 的 层次 感 和 连贯 性 。 | 


一 


| 


3.7.4 木 模 紫 & 藉 荷 色 


出 下 本 于 区 坊 曙 内 


计 木 樟 紫 是 一 个 中 明度 的 紫色 ， 是 非常 低调 i @ 藉 荷 色 是 一 种 偏 灰 调 的 紫色 ， 和 
二 的 紫色 ， 它 代表 着 优雅 和 多 愁 善 感 。 i 。 低 ， 所 以 没 了 紫色 固有 的 夺目 ， 反 倒 会 

木 樟 紫 本 不 是 明快 的 颜色 , 但 在 该 网 页 页 中 | 现 出 一 种 温 婉 、 素 雅之 感 。 ! 
木 樟 紫 搭配 白色 ， 会 让 原本 沉闷 的 色彩 变 | @ 在 该 网 页 中 ,整体 的 颜色 氛 轩 是 非常 安 甬 、| 


得 具有 生机 。 : 柔和 的 。 再 搭配 上 规整 的 网 页 布局 ， 整个 | 
在 该 网 页 中 ， 半 透明 的 图 片 占据 了 整个 画 | 页 面 风格 给 人 一 种 比较 严谨 、 理 智 且 非常 ; 
| 。 面 ， 这 种 设计 方式 是 最 近 几 年 所 流行 的 ，; 。 舒适 的 感觉 。 : 


| “能够 让 人 感到 一 种 腔 肛 、 隐 隆之 美 。 “| | 


过 世 玄 闹 《 大 功 捕 、 人 导 、 
家 女 繁 《四 办 刁 L 机 去 世 太 。 


丁香 紫 颜色 轻柔 淡雅 , 象征 着 女性 的 温柔 水 晶 紫 颜色 浓郁 、 神 秘 ， 是 既 细 膨 又 答 感 | 
娴熟 。 : 的 颜色 。 

该 网 页 简洁 、 工 整 和 自然 ， 追 求 版 式 与 颜 ; | @ 在 该 网 页 中 ， 水 晶 紫 搭配 红色 ， 在 画面 中 | 
© 色 之 间 的 一 种 自然 、 和 谐 之 美 。 i 形成 了 一 种 妩媚 、 性 感 的 基调 。 | 


色 的 柔美 ， 又 有 灰色 的 坚毅 。 


| @ 在 该 网 页 中 ， 闫 色 是 富有 节奏、 询 律 的 ， | 调 品类 似 的 | 
虽然 同 为 紫色 调 ， 但 通过 颜色 了 明度、 纯度 | 颜色， 这样 的 配色 方式 既 能 够 让 画面 有 颜 | 
的 变化 ， 为 画面 打造 了 多 层次 的 效果 。 ”， ” 色 的 变化 ， 又 能 让 画面 看 起 来 色调 统一 。 | 


! 
! 
! 
! H 
| @ 网 页 采用 “拐角 型 ”的 布局 方式 ， 重 要 的 | @@ 文字 的 排版 也 是 网 页 设计 的 重点 ， 例 如 在 | 
| 。 文字 信息 通过 人 的 阅读 顺序 排列 ， 是 非常 。 该 网 页 中 ， 标 题 文字 醒目 ， 副 标题 文字 被 
| 人 性 化 的 设计 方式 。 | 。 变形 处 理 ， 说 明文 字 位 置 放 在 了 页 面 中 | 
， 。 心 ， 这 样 的 排版 ， 让 六 览 网 页 的 人 能 够 了 ， 
| | 


| 。 视觉 印象 天 真 ， 活 小 的 气质 。 

| @ 在 该 网 页 中 ， 靓 丽 的 色彩 给 人 耳目 一 新 的 | 人 @ 该 网 页 是 商业 网 站 的 ， 所 以 广告 占据 了 

| 感觉。 | 面积 的 篇 幅 ， 而 且 其 他 的 文字 信息 也 非 

| @ 该 网 页 通过 凝练 的 色彩 ， 简 洁 的 文字 ， 让 | 多， 所 以 采用 了 白色 作为 背景 ， 让 整个 
浏览 者 印象 深刻 。 ， 。” 面 看 起 来 非常 干净 、 整 洁 。 


中 皇 膨 妥 于 涉 昼 司 需 8 外 


机 要 河 闻 遍 荡 骨 上 日、 
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| 色 的 优雅 ， 又 有 蓝 色 的 理智 是 一 种 特别 | 
该 网 页 为 “ 国 ” 字 型 网 页 布局 ， 将 网 页 中 ; 。 的 紫色 。 | 
的 内 容 非常 有 条 理 地 摆 放 ， 即 便 内 容 多 ，; @ 该 网 页 颜色 单纯 ， 用 大 面积 的 单 色 来 刺激 | 
也 不 会 显得 凌乱 。 | 浏览 者 的 眼球 。 | 
在 该 网 页 中 ， 画 面 的 背景 是 一 大 亮点 ， 因 ; @ 网 页 简约 的 布局 方式 ， 能 够 让 浏览 者 迅速 ; 
为 其 颜色 不 断 变化 且 带 有 纹理 ， 这 样 的 背 ; 。 得 到 网 页 所 要 传递 的 信息 ， 这 是 一 种 以 少 ; 
景 既 能 使 画面 丰富 ， 又 不 会 太 醒 目 。 胜 多 的 方法 。 : 


蝴蝶 花 紫 颜色 绚丽 、 华 美 ， 这 样 的 颜色 张 ; @ 蔷 共 紫 是 一 种 浅 紫色 ， 阴 度 高 ， 纯 度 低 ， 

扬 、 随 性 ， 毫 无 保留 地 展示 自己 的 美 。 ”: 。 代表 着 温柔 、 浪 漫 、 爱 情 。 | 
在 该 网 页 中 ， 颜 色 丰 富 多 样 ， 整 个 画面 气 ; @ 在 该 页 面 中 ， 以 白色 搭配 蔷 菩 紫 ， 形 成 了 一 | 
氛 活 浅 、 风 趣 ， 为 浏览 者 创造 出 最 佳 的 恰 ; 。 种 甜美 、 芳 香 的 感觉 。 而 且 网 页 中 都 是 以 | 
悦 氛 围 和 视觉 环境 。 : 。。” 圆 形 作为 图 案 , 整体 营造 了 一 种 阴柔 之 美 。 ; 


黑 : 黑色 是 具有 神秘 力量 的 颜色 ， 它 
有 着 吞噬 一 切 的 力量 。 说 到 黑色 ， 能 够 让 
人 联想 到 漆黑 的 深夜 、 消 极 的 情绪 、 恐 怖 
的 死神 等 ， 同 时 它 又 是 非常 尊贵 的 颜色 ， 
象征 着 尊贵 与 永恒 。 黑 色 是 永远 不 会 过 时 
的 颜色 ,一直 都 位 于 时 尚 的 前 沿 ， 深 受 大 
众 喜 爱 。 

色彩 情感 : 力量 、 品 质 、 大气、 严肃 、 
正义 、 豪 华 、 庄 严 、 正 式 、 恐 怖 、 阴 暗 、 
沉 问 、 犯 罪 、 暴 力 、 阴 险 、 毒 辣 、 犯 罪 、 
违法 。 

白 : 白色 也 是 一 种 “无 彩色 ”， 是 一 
种 包含 光谱 中 所 有 颜色 光 的 颜色 。 不 同 的 
民族 赋予 白色 不 同 的 含义 ， 例 如 在 我 国 ， 
白色 苍白 无 力 , 是 没有 生气 、 死 亡 的 象征 ; 
而 在 欧洲 ， 白 色 则 象征 纯洁 、 坚 贞 ， 所 以 
色 是 婚礼 礼服 的 主要 色彩 。 


色彩 情感 : 整洁 、 明 亮 、 
单纯 、 清 痰 、 了 卫生、 干净、 
雅致 、 贞 洁 、 神 圣 、 和 平 、 
纯净 、 寒 冷 、 严 峻 、 贫 乏 、 
哀伤 、 冷 痰 、 虚 无 。 

灰 : 灰色 是 介 于 白色 与 黑色 之 间 的 色 
调 ， 它 不 与 黑 和 白 比 纯粹 ， 却 不 似 黑 和 白 
的 那样 过 分 单一 和 人 四 是 一 
种 非常 中 庸 的 颜 色 ， 它 代表 着 洗 尽 铅 华 的 
从 容 ， 是 干 金 散 尽 还 复 来 的 洒脱。 当然 ， 
灰色 也 是 沉默 、 消 极 的 颜色 ， 若 要 摆脱 这 
种 消极 之 感 ， 可 以 搭配 高 纯度 的 彩色 ， 就 
被 赋予 了 生命 力 。 

色彩 情感 : 高 雅 、 艺 术 、 低 调 、 传 统 、 
中 性 、 中 庸 、 包 容 、 深 藏 不 露 、 谦 虚 、 平 
消极 、 压 抑 、 烦 
黯淡 。 


圣洁 、 知 性 、 
畅快 、 朴 素 、 
谦卑 、 精 密 、 


空洞 、 葬 礼 、 


躁 、 脐 胜 、 不 堪 、 无 情 、 


象牙 白 RGB=255.251.240 | 


黑 RGB=0.0.0 
CMYK=93.88.89.88 


路 吝 有 麻 号 半 涨 喇 避 册 8 商 
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自 色 是 十 分 纯粹 的 颜色 ， 代 表 着 干净 、 圣 : @ 月 光 白 具有 黄色 的 色彩 倾向 ， 它 虽 没 有 自 | 
洁 ， 是 一 种 常用 的 颜色 。 ; 。 色 的 纯粹 ， 但 却 增添 了 柔软 之 感 。 : 
这 是 一 个 牛奶 主题 的 网 站 ， 选 择 白 色 作为 ; @ 该 网 页 设计 非常 具有 趣味 性 ， 以 月 光 白 为 ; 
主 色调 可 以 联想 到 牛奶 ， 也 能 够 联想 到 干 | 。 主 色调 ， 搭 配 低 纯度 红色 ， 还 有 可 爱 的 插 ; 
净 、 卫 生 、 健 康 。 | 。 画 ， 让 整个 画面 充满 童真 、 童 趣 。 | 
该 网 页 内 容 简单 、 整 洁 ， 这 样 的 网 页 使 用 ; | 

起 来 非常 方便 。 : | 


3.8.3 雪白 & 象牙 白 


CONCEPT 
ey 


雪白 是 一 种 偏 青 色调 的 白色 ， 颜 色 干净 、 区 它 代表 着 细 ; 
透明 ， 非 常 梦幻 。 | 肛 、 和 善 、 温 和 、 香 甜 。 | 
该 网 页 是 以 雪白 作为 背景 颜色 ， 搭 配 上 青 ; @ 该 网 页 是 以 象牙 白 为 主 色调 ， 以 橙色 及 和 白 | 
色调 的 辅助 色 ， 整 个 界面 的 颜色 协调 统 : 。 色 为 辅助 色 ， 整 个 画面 色彩 细腻 、 和 柔和 。 | 
一 ， 让 人 看 了 心情 舒畅。 | @ 网 页 采用 中 间 窗口 型 设计 ， 这 样 的 设计 方 | 
该 网 页 内 容 较 少 ， 但 细节 却 非常 丰富 。 例 | 。 式 可 以 为 网 页 添加 趣味 性 ， 让 用 户 能 把 浏 ; 
如 雪花 、 水 清 等 图 形 与 配色 方案 相 契 合 ， ; 。 览 的 过 程 变 成 一 种 享受 。 | 
网 页 下 方 波浪 形 的 图 形 让 画面 不 再 沉闷 。 : 


in Austin Texas 


PASSIONATE DESIGNERS 


1@ 10 6 亮 灰 9 
| 有 高 雅 、 素 净 的 寓意 。 庸 、 谦 和 。 | 
| @ 在 该 网 页 中 ， 以 亮 灰色 作为 背景 ， 然 后 以 ; @ 在 该 网 页 中 ， 以 灰色 作为 背景 颜色 ， 搭 配 | 


一 个 彩色 的 图 形 作为 视觉 中 心 ， 以 它 的 色 ; 。 不 同 颜色 的 图 形 ， 这 样 就 打破 了 灰色 沉 | 


| 彩 点 亮 整个 画面 。 | 闽 、 呆 板 的 感觉 。 | 
| 人 @ 该 网 页 内 容 十 分 简洁 ， 利 用 特别 的 图 案 以 | @ 该 网 页 中 , 以 图 案 的 组 合作 为 视觉 的 中 心 ，| 


及 具有 说 服 力 的 标题 赢得 用 户 的 关注 。 ”: ”这 些 图 形 既是 装饰 又 是 按钮 ， 是 时 下 较为 | 
; ”流行 的 设计 方式 。 | 


| 坚 裔 的 感觉。 有 着 知 没 一 切 的 力量 , 象征 着 刚强 、 果 敢 、| 
| @ 这 是 一 款 游戏 类 的 网 页 设计 ， 在 设计 时 要 | 。 神秘 。 | 
| 。 考虑 玩家 的 感受 ， 灰 色 代表 着 男性 坚 坑 、 | @ 该 网 页 为 数码 类 的 网 页 设计 ， 所 以 选择 黑 | 
勇敢 的 性 格 ， 红 色 代表 着 血腥 、 杀 用 ， 从 : ” 色 作 为 主 色调 , 象征 着 品质 高端 与 科技 。 
配色 上 就 给 人 很 强烈 刺激 的 游戏 代入 感 。 ;人 @ 该 网 页 主要 是 介绍 商品 ， 通 过 图 像 及 说 明 ， 
| “文字 进行 介绍 ， 整 个 画面 内 容 紧 凑 ， 又 不 | 


二 


本 


路 乍 采 下 站 污 呈 到 翰 2 溃 


网 页 布局 是 指 网 页 内 容 在 页 面 上 所 处 位 置 的 设计 。 网 页 布局 会 决定 整个 网 页 风格 以 
及 视觉 效果 。 合 理 的 网 页 布局 方式 有 利于 网 页 信息 的 编排 ， 增 加 访客 的 浏览 兴趣 和 接受 
程度 ， 也 是 体现 一 个 网 页 个 性 化 与 人 性 化 的 重要 手段 。 优 秀 的 网 页 布局 还 能 够 引导 访客 


的 视觉 流向 ， 营 造 出 一 个 富有 生气 的 独特 世界 。 


于 于 于 中 平 于 于 于 


LILY LOVE 
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二 中 寺 于 于 于 叶 叶 
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that starts 
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于 和 于 于 平 于 和 于 于 哇 


局 决定 了 整个 网 页 的 风格 和 视觉 效果 ， 


合理 的 网 页 布 


” 字 型 布局 、 拐 角 型 布局 、 封 面 型 布局 、 对 


局 和 骨骼 型 布局 。 
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局 可 以 增加 访客 阅 
变 受 程度 ， 同 时 ， 它 还 影响 了 整个 画面 的 个 性 化 设计 。 网 页 的 布局 基本 


” 字 型 布局 、 


” 字 型 布局 也 被 称 为 “ 同 ” 字 型 布局 ， 是 一 种 常见 的 网 页 布局 方式 。 这 种 布 


局 方式 通常 顶部 为 


网 站 的 标题 .导航 栏 以 及 横幅 广告 条 等 , 接 下 来 就 是 网 站 的 主要 内 容 ， 
是 网 站 的 一 些 基本 信息 、 联 系 方式 、 版 权 声明 等 。 


> 


串 州 半 商 路 融 淹 吾 


在 浅 褐 色 的 衬托 下 ， 
得 非常 突出 。 画 面 中 每 一 处 的 分 栏 都 非 | 
常 清新 ， 很 具有 条 理性 。 在 主要 内 容 部 | 
分 ,信息 量 庞大 ， 所 以 将 其 分 为 两 份 ， 
而 且 通 过 颜色 、 字 号 的 变化 ， 让 信息 变 | 
得 更 加 条 理 清晰 。 | 


| 团 CMYK=0.72.92.0 RGB=255.106.1 

| 国 CMYK=57.47.0,0 RGB=131,137,242 

| 国 CMYK=11.9?.83.0 RGB-230.47.46 

| 转 CMYK=79.74.73.46 RGB=50.50.49 | 
| 国 CMYK=11.79.12.0 RGB=232.86.150 | 

| | 国 CMYK=64.30.0.0 RGB=93.160.232 | 


网 站 名 称 、 广 告 、 导 航 


人 主要 内 容 4 


i ”设计 理念 ，“ 国 ” 字 型 的 布局 方 | 
i 式 是 最 常见 的 布局 方式 ， 该 网 页 中 信 | 
| 息 量 较 大 , 画面 左 侧 及 右 侧 为 超 链接 ， | 
| 中 间 部 分 为 重要 内 容 ， 整 个 页 面条 理 | | nae 

| 非常 清晰 。 | | sind 
| ”色彩 点 评 : 该 网 页 为 绿色 搭配 象 
| 牙 白 ， 整 个 画面 色调 清新 、 柔 和 ， 给 人 
| 一 种 清新 、 活 泌 的 感觉 。 
| 人 俐 该 网 页 页 眉 采用 卡通 插图 作为 
| 装饰 ， 整 体 效果 非常 可 爱 ， 为 画面 增添 人 , da 
| 了 幽默 感 。 该 网 页 以 亮 灰色 作为 主 色调 ， 采用 | 
| 作画 面 中 各 类 图 标 、 图 形 都 采用 | | 单 色调 的 配色 方案 ， 整 体 色调 安静 柔 | 
| 了 绿色 调 , 给 人 一 种 和 谐 、 统一 的 美感 。 “| 和 。 画面 中 以 紫色 和 红色 作为 点 级 色 ， | 
| 侠 该 网 页 的 颜色 从 浓 到 淡 ， 这 种 ; |; 让 画面 的 颜色 看 起 来 不 那么 沉 问 。 

| 颜色 的 过 渡 具 有 视觉 引导 性 ， 引 导 访客 [ 面 

| 的 视线 从 上 到 下 地 移动 。 

| EECMYK=8.0.40.0RGB=173.232.181 
| EU CMYK=65.0.76.0 RGB=78.198.101 


加 CMYK=39.36.33.0 RGB=171.161.160 
转 CMYK=73.85.0.0RGB=110.54.174 
CMYK=2.3,7.0 RGB=251.248.241 国 CMYK=0.84.63.0 RGB=252.70.73 

| EE CMYK=31.100.100.1 RGB=194.9.17 : CMYK=13.10.10.0 RGB=228.228.228 


Bo 
HH 


什么 是 网 页 设计 的 视觉 流程 ? 


视觉 流程 是 指 人 的 视觉 在 接受 外 界 信息 时 的 流动 程序 。 网 页 设计 的 视觉 流程 是 一 


种 “空间 的 运动 ”， 因 为 人 的 视野 是 有 限 的 ， 它 必须 按照 一 定 的 轨迹 进行 移动 。 所 以 
可 以 通过 控制 视觉 流程 ， 诱 导 访 客 的 视线 按照 一 定 的 轨迹 进行 移动 ， 这 样 能 够 让 网 页 
的 信息 更 全 面 、 精 准 地 传递 。 第 
> 
方案 
三 色 配 四 色 配 色 网 
J | 
\ |) 
ko 汪 。 汪 3 长 * 汪 > 瀛 * 当 站 
, 业 。 汪 。 汪 ， 汪 * 汪 。 汪 | 
DA NG ” 尖 DA 3 时 4 DA 习 
， 沫 ， 当 。 类 ，， 尖 。 尖 。 类 ， 
上 ee。A bea» M,N 
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4.1.2 拐角 型 布局 


拐角 型 的 布局 方式 与 “ 国 ” 字 型 的 布局 方式 非常 相近 ， 通 常 在 网 页 的 上 方 为 标题 
及 广告 横幅 ， 接 下 来 的 左 侧 是 一 窒 列 链接 按钮 ， 右 侧 为 主要 信息 内 容 ， 最 下 面 是 网 站 
的 一 些 基本 信息 、 联 系 方式 、 版 权 声明 等 。 全 


: 拐角 型 的 布 


设计 理 局 方式 是 较 

i 为 常见 的 布局 方式 ， 该 网 页 图 文 并 茂 ，| 

| 在 信息 内 容 较 多 时 ， 就 适合 选择 这 样 的 | 

| 布局 方式 。 

| 色彩 点 评 : 该 网 页 为 低 明 度 色彩 基 | 

; 调 ， 前 景 中 的 元 素 为 高 明度 色彩 基调 ， | 

这 样 一 明 一 暗 的 对 比 ， 凸 显 了 网 页 的 |; 
题 。 : 

乡 半 透明 的 网 页 背景 内 容 丰 富 ， 又 | 

不 会 有 喧 宾 夺 主 的 感觉 。 | 

| 人 鲍 画 面 中 的 颜色 比较 简单 ， 几 个 | 

| 有 彩色 的 按钮 和 图 标 让 画面 效果 更 加 | 

网 站 名 称 、 广 告 导航 | 鲜 活 。 | 

| 俐 低 明 度 的 色彩 基调 给 人 一 种 稳定 、| 

| 理智 的 视觉 感受 。 

| EE CMY EK=87.77.71.51 RGB=32.43.47 

: I CMYK=90.83.80.69 RGB=14.19,.22 

: EE CMY K=48.65.99.8 RGB=150.,100.39 

| OM CMYK=40.18.90.0 RGB=178.,190.51 


击 否 淋 闻 遍 束 娄 日、 


网 
页 
配 
色 
设 
计 
手 
册 


人 主要 内 容 


基本 信息 、 联 系 方式 、 版 权 声 明 


3p Re 
人 聘 ， 


| 这 是 一 个 游戏 的 网 页 设计 ， 红 色调 。 ;该 网 页 为 咖啡 色调 ， 木 板 纹理 的 背 ， 
| 的 配色 方案 给 人 一 种 热烈 、 激 情 的 感 | 景 直人 觉得 稳重 、 结 实 。 网 页 采用 拐角 | 
| 觉 。 倾 斜 的 构图 方式 给 人 一 种 不 稳定 的 | | 型 的 布局 方式 ， 画 面 中 图 案 内 容 较 多 ， | 
感觉 ， 与 整个 画面 的 气氛 相 呼应 。 给 人 一 种 饱满 、 丰 富 的 感觉 。 


| 国 CMYK=55.74.78.20 RGB=123.75.58 | | 国 cCMYK=g6.49.33.0RGB-0.116.151 
| 国 CMYK=100.100.100.100 RGB=0.0.0 | “| 国 CMYK=23.81.8g.0RGB=208.82.44 
| CMYK=8,4.55,0 RGB=250.241.138 ! CMSYK=84.83.90.74 RGB=21.14.6 


: 转 CMYK=8.4.55.0 RGB=250.241.138 : CMYK=12.19.57.0 RGB=237.211.126 


5.76.88.48 RGB=74.48.32 


网 页 设计 的 视觉 流程 一 一 单 向 视觉 流程 
单 向 视觉 流程 可 以 分 为 横向 、 纵 向 和 和 斜 向 三 种 形式 。 单 向 的 视觉 流程 就 是 网 页 版 
的 图 形 、 文 字 等 内 容 以 横向 、 纵 向 或 斜 向 的 方式 去 组 织 构图 。 
横向 的 视觉 流程 纵向 的 视觉 流程 斜 向 的 视觉 流程 
一 | We 


车 


re Shienedhe sept the wen 


owenow | 
= 


横向 的 视觉 流程 给 人 一 种 坚定 、 ”纵向 的 视觉 流程 给 稳定、 秩序 ” 斜 向 的 视觉 流程 给 人 以 不 稳定 的 


直观 的 感觉。 之 感 。 动感 ， 从 而 引起 访客 的 注意 
配色 方案 
双色 配色 三 色 配 色 四 色 配 色 
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4.1.3 封面 型 布局 


封面 型 的 网 页 布局 通常 应 用 在 网 站 的 首页 ， 打 开 网 页 后 ， 首 先 看 到 的 应 该 是 精美 
的 图 形 或 视频 ， 网 页 中 的 基本 信息 会 很 少 ， 所 以 更 容易 吸引 访客 的 注意 。 这 类 网 页 是 
近 几 年 开始 兴起 的 ， 通 常 给 人 一 种 大 方 、 赏 心 悦 


会 该 网 页 布局 方式 简约 ， 
F 网 页 后 ， 首 先 就 会 注意 到 画面 中 | 
| 心 位 置 的 图 案 及 文字 ， 主 题 非常 突出 。 
| 色彩 点 评 : 该 网 页 颜色 单纯 、 干净 ， 
| 单 色调 的 背景 给 人 一 种 简约 、 现 代 之 感 。 | 
| 侠 绿 色调 的 配色 方案 给 人 一 种 健康 、| 
折 的 感觉 。 | 
侈 在 对 比 色 的 作用 下 ， 红 色 的 西 红 | 
: 柿 非常 突出 。 | 
网 站 名 称 .号 外 :| 鲜 该 网 页 主要 表现 的 是 “健康 ”这 | 
| 一 主题 ， 画 面 中 的 文字 信息 、 绿 色 蔬菜 | 

| 以 及 色调 都 紧 扣 这 一 主题 。 | 
| CMYK=0.0.0.0 RGB=255,255,255 | 
: NN CMYK=31.3.53.0 RGB=195,223,146 | 
| EE CMYK=82.40.100.3 RGB=44.125,1 | 
| EE CMYK=20.93.100.0 RGB=214.45.0 


30 SPECIES. 30 PIECES. 1 FRAGHENTED SURYIVAL 


的 网 页 ，， 
号 | 高 亮度 的 灰色 给 人 一 种 优雅 、 温 柔 的 感 
在 这 个 画面 中 ， 文 字 信息 觉 。 封 面 型 的 布局 方式 整体 造型 新 颖 独 | 
彩色 和 大 彩色 的 对 比 ， 大 篇 幅 的 图 像 给 人 一 种 舒展 、 大 气 | 
和 托 下 ， 洋 红色 调 的 文字 格外 具有 吸 。 | 的 感 党 : 
力 。 


CMYK=0.0.0.0 RGB=255.255.255 
CMYK=35.100.74.1 RGB=186.6.60 
CMYR=100.100.100.100 RGB=0.0.0 


加 CMYK=42.33.32.0 RGB=163.163.163 
国 CMYK=91.87.87.78 RGB=4.3.3 

国 CMYK=43.91.33.2 RGB=36.55.119 
口 CMYK=0.0.0.0 RGB=255.255.255 
CMYK=7.6.7.0 RGB= 241.240.238 


网 页 设计 的 视觉 流程 一 一 曲线 视觉 流程 


曲线 视觉 流程 是 指 网 页 中 的 元 素 随 着 曲线 进行 运动 变化 ， 曲 线 型 的 视觉 流程 不 像 
单 向 型 视觉 流程 那么 直观 ， 它 具有 流畅 、 飘 逸 的 美感 。 曲 线 的 视觉 流程 可 以 分 为 C 型 
和 S 型 两 种 。 


0 型 的 视觉 流程 上 有 很 强 的 方向 性 ， 能 够 增强 画面 的 s 型 的 视线 流程 具有 很 强 的 动感 和 韵律 ， 能 够 让 画 
视觉 力度 。 面 效 果 更 加 生动 。 


配色 方案 
双色 配色 三 色 配 色 四 色 配 色 
ER 
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部 部 
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ss 
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ae 
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东 豆 疆 字 区 圳 曙 内- 
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4.1.4 对 称 型 布局 


对 称 布局 采用 左右 或 者 上 下 对 称 的 布局 ， 但 是 ， 这 种 对 称 并 非 严格 意义 上 的 对 
ee 中 轴线 分 开 ， 形 成 两 个 版 面 ， 两 个 版 面 有 颜色 、 图 形 的 不 同 变化 。 这 类 网 
网 觉 冲击 力 强 ， 给 人 一 种 平衡 的 美感 。 其 缺点 是 是 分 的 有 可 结合 比较 四 难 


一 种 严谨 、 绩 密 的 感觉 。 
色彩 点 评 : 该 网 页 由 两 种 颜色 组 成 ， | 

| 橙色 和 紫色 为 对 比 色 ， 这 样 的 配色 可 以 ; 
1 引发 画面 颜色 的 对 比 ， 让 颜色 效果 更 加 ! 
具有 冲击 力 。 | 
ee 乡 画 面 中 的 白色 文字 及 按钮 有 提高 | 
画面 亮度 、 活 跃 画面 气氛 的 作用 。 

| 俐 该 网 页 画面 内 容 统 一 ， 但 颜色 却 | 
| 追求 对 比 ， 这 是 一 种 在 统一 中 追求 变化 | 
| 的 做 法 ， 在 对 称 式 布局 方式 的 网 页 设计 | 


| 中 经 常用 到 。 : 
ES 二 要 向 容 。 。 合 在 青 景 中 有 微弱 的 纹理 ， 这 种 做 | 


网 站 名 称 、 导 航 


| 法 有 丰富 画面 内 容 的 作用 ， 让 画面 内 容 | 
中 | 有 更 加 生动 、 活 泌 的 感觉 | 
| 一 | 


Bier 
Bier 


Contact We wm About | 


ee- 在 该 网 页 中 ， 各 部 分 的 按钮 都 是 采 | 
| 与 白 在 明度 上 的 对 比 非常 强烈 ， 对 称 的 方式 进行 布局 ， 给 人 一 种 对 | 
| 该 网 页 以 黑色 为 主 色调 ， 搭 配 灰色 和 称 、 平 衡 的 美感 。 画 面 整体 布局 非常 简 | 
| 色 ， 整 个 画面 形成 鲜明 的 对 比 效果 。 约 ， 让 访客 对 画面 内 容 一 览 无 余 。 “| 
| 面 中 的 人 物 姿态 相同 ， 给 人 一 种 平衡 的 国 

美感。 

四 口 CMYK=0.0.0.0 RGB=255.255,255 

| 国 CMYK=100.100.100.100 RGB=0.0.0 
| CMYK=0.0.0.0 RGB=255,255,255 

| 国 CMYR=54.48.48,0 RGB=136.130.124 
| 国 CMYK=100.100.100.100 RGB=0.0.0 


网 页 设计 的 视觉 流程 一 一 


焦点 是 指 视觉 心理 的 焦点 ， 它 通常 以 鲜明 的 


视觉 流程 


E 题 视觉 要 素 占据 页 面 最 能 成 为 视觉 


焦点 的 区 域 或 位 置 ， 以 聚焦 浏览 者 的 视线 ， 形 成 视觉 与 心理 上 的 焦点 ， 使 网 页 的 主题 


更 加 鲜明 。 在 视觉 心理 的 作用 下 ， 


焦点 视觉 流程 能 使 主题 更 加 鲜明 、 强 烈 。 焦 点 视觉 


流程 分 为 中 心 视觉 流程 、 向 心 视觉 流程 与 离心 视觉 流程 三 种 。 


中 心 视觉 流程 


全 
3 


中 心 视觉 流程 将 视觉 焦点 摆 放 在 
中 心 位 置 ， 在 它 的 周围 留 有 大 量 
的 空白 区 域 。 这 样 的 视觉 效果 突 
出 而 强烈 ， 给 人 一 种 权威 、 端 庄 
的 感觉 。 


配色 方案 
三 色 配 色 


网 页 设计 赏析 
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向 心 型 视觉 流程 


向 心 型 视觉 流程 以 页 面 中 的 一 个 
重要 元 素 作为 中 心 ， 然 后 引导 其 
余 的 视觉 要 素 向 内 集中 的 方式 围 
绕 主题 形象 进行 编排 。 这 种 视觉 
流程 能 够 明确 突出 主题 内 容 ， 而 
且 也 能 表达 次 要 的 信息 。 整 个 画 
面 有 一 定 的 层次 关系 。 


离心 视觉 流程 


离心 视觉 流程 是 以 向 外 扩张 的 方 
式 围绕 页 面 中 心 点 进行 安排 ， 包 
围 页 面 中 心 的 内 容 是 视觉 的 重 
心 ， 而 页 面 中 心 的 内 容 反 倒 被 弱 
化 了 。 这 样 的 视觉 流程 能 够 使 画 
面 的 内 容 更 加 具有 张力 ， 有 一 种 
不 稳定 的 视觉 效果 。 
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却 计 号 疝 习 坤 了 溃 


串 州 圭 扎 薄型 昼 


| 
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TT 


” 字 型 布局 方式 是 将 四 边 空 出 ， 只 用 中 间 的 窗口 来 设计 ， 这 样 的 布局 方式 可 
以 将 用 户 的 视线 集中 在 窗口 内 。 但 是 这 样 的 布局 方式 也 有 弊端 ， 例 如 在 内 容 较 多 的 情 
况 下 ， 空 间 会 显得 十 分 狭小 ， 给 人 一 种 压抑 的 感觉 。 这 类 网 页 通常 应 用 在 游戏 、 娱 乐 


设计 理念 ， 该 网 页 采用 “ 口 ” 字 型 | 

| 的 布局 方式 ， 整 个 画面 元 素 巧妙 连接 ， 
; 布局 紧凑 ， 内 容 丰 富 。 | 
| 色彩 点 评 : 该 网 页 为 中 明度 的 色彩 | 
| 基调 ， 背 景 颜色 柔和 、 安 稳 ， 但 是 前 景 | 
; 中 的 颜色 却 很 丰富 ， 给 人 以 年 轻 、 活 力 ; 
四 铂 该 网 页 将 窗口 制作 成 书展 开 的 样 | 
i 子 ， 给 人 一 种 代入 感 。 | 
关 ] 侈 整个 画面 属于 卡通 风格 ， 整 体 造 | 
网 站 名 称 ,导航 i 型 别具一格 、 不 落 俗 套 。 | 
i ” 乡 画面 中 有 很 多 细小 的 装饰 线 ， 这 | 
: 些 线 具 有 分 割 、 装 饰 、 引 导 视 线 的 作用 。 : 
| NN CMYK=19.2235.0 RGB=217.200.170 | 
: EE CMYK=66.35.10.0 RGB=95.150.202 | 
| CMYK=17.91.42.0 RGB=219.51.102 | 
| CMYK=7,6.9.0 RGB=241.240,235 | 


RUFINA 


ee 这 是 一 个 圣诞 主题 的 网 页 设计 ,在 : 
| 土 黄色 的 色调 ,搭配 上 矢量 的 插画 ， 和 柔和 的 背景 衬托 下 ， 红 色 的 礼物 格外 具 | 
| 给 人 一 种 怀旧 的 视觉 印象 。 画面 中 “ 框 ”| 有 吸引 力 。 红 色 搭配 上 绿色 ， 是 典型 的 | 
| 是 很 窗 的 细 线 ， 这 样 的 设计 既 能 将 视线 | | 圣诞 配色 方案 ， 具 有 浓厚 的 节日 气氛 。 | 


| 


| 于 拥堵 的 感觉 。 
CMYK=49.7.27.0 RGB=141.203.198 
国 CMYK=75.30.75.0 RGB=66.146.96 
口 CMYK=0.0,0.0 RGB=255.255.255 
国 CMYK=33.99.100.1 RGB=189.27.23 
国 CMYK=52.71.82.15 RGB=134.84.57 
CMYK=15.16.15.0 RGB=223,215,212 


| 转 CMYK=100.92.45.10 RGB=20.50.99 
| CMYK=0.0.0.0 RGB=255.255.255 
| 转 CMYK=87.76.49.13 RGB=51.70.99 

| 国 CMYK=27.39.88.0 RGB=204.163.48 
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网 页 设计 的 视觉 流程 一 一 反复 视觉 流程 
反复 视觉 流程 是 指 网 页 中 相同 或 相似 的 视觉 元 素 , 做 有 规律 、 秩 序 和 节奏 的 运动 。 
可 以 带 给 人 一 种 韵律 美和 秩序 美 ， 同 时 有 强调 的 作用 ， 增 加 访客 的 记忆 效果 。 
A higher plain 
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4.1.6 通栏 型 布局 


通栏 型 布局 方式 是 一 种 简洁 明快 的 布局 方式 ， 是 现在 较为 流行 的 布局 方式 。 其 布 
局 方式 由 上 至 下 横向 排列 ， 每 个 模块 以 横向 为 单位 ， 不 受 方 框 的 限制 。 这 样 的 布局 方 
式 大 气 、 开 阔 ， 在 细节 的 处 理 上 更 具有 灵活 性 。 


二 


串 州 壮志 薄型 导 


设计 理念 : 在 该 网 页 中 ， 通 栏 型 的 | 


人 ; 布局 方式 充分 地 利用 了 网 页 的 空间 , 整 
y i 体 给 人 一 种 舒展 、 大 气 的 视觉 印象 。 
| 色彩 点 评 : 整个 网 页 的 界面 为 白色 ， | 
\ | 导航 栏 及 文字 为 灰色 ， 这 样 的 搭配 给 人 | 
Ee | 一 种 干净 、 高 品质 的 视觉 印象 。 
: ; | 人 乡 网 页 广告 所 占据 的 面积 较 大 ， 起 | 
| 到 了 很 好 的 宣传 作用 。 | 


| 例 该 网 页 中 的 信息 量 较 大 ， 通 栏 型 | 
| 的 布局 方式 让 画面 内 容 可 以 更 加 清晰 地 | 
| 进行 展示 。 | 
| 侠 网 页 中 的 广告 颜色 也 非常 轻柔 ， 
广告 | 与 整个 画面 的 色调 相 统一 。 


CMYK=0.0.0.0 RGB=255,255,255 


CMYR=11,7,5.0 RGB=231.234.239 


网 页 内 容 | 
CNMYK 一 75.69.66.29 RGB=69.69.69 
se ! CMYK=1,17,13,0 RGB=252,226.218 | 
基本 信息 联系 方式 ,版权 记 明 : EE CMYK=5.91.23.0 RGB=242.43.124 | 


和 站 
sr 1 i TE ,| 
on mm 上 st 全 
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该 页 面 采 用 冷色 调 的 配色 方案 ， 紫 
色 在 画面 中 格外 醒目 ， 给 人 一 种 浪漫 、 | 
高 贵 的 感觉 。 通 栏 型 的 布局 方式 使 整个 i 
画面 看 上 去 简约 、 精 致 , 计 


| 该 网 页 采用 高 明度 的 色彩 基调 ， 绿 
| 色 作 为 点 组 色 ， 给 人 一 种 清新 脱俗 的 感 
| 觉 。 通 栏 型 的 布局 方式 让 整个 画面 看 上 
| 去 更 加 和 舒服、 大气。 


| 国 CMYK=53.44.42.0 RGB=137.137.137 
| 国 cCMYK=66.9.61.0 RGB=89,182.130 

| 回 CMYK=0.0.0.0 RGB=255,255,255 
CMSYK=14.13.19.0 RGB=227.221.208 


加 CMYK=5.67.27.0 RGB=243.119.142 
国 CMYK=5.44.91.0 RGB=247.167.5 
CMYK=70.4.33,.0 RGB=42,189,191 
CMYK=35.28.26.0 RGB=178.178.178 
国 CMYK=74.86.0.0 RGB=120.20.200 
CMYR=5.4.4.0 RGB=245.245.245 
CMYK=43.0.17.0 RGB=153,224,227 


导向 视觉 流程 


网 页 设计 的 视觉 流程 
导向 视觉 流程 是 通过 诱导 性 视觉 元 素 ， 主 动 引 导 访 客 的 视线 向 一 定 的 方向 做 顺序 
运动 。 导 向 型 视觉 流程 可 以 让 画面 的 内 容 传递 得 更 加 全 面 ， 使 信息 更 具 条 理性 ， 发 挥 


最 大 的 信息 传递 作用 。 导 向 视觉 流程 分 为 文字 导向 、 手 势 导向 、 指 示 导 向 和 视线 导向 
四 种 。 


从 天 


| 文字 导向 视觉 流程 通过 页 面 中 的 文字 引导 访客 的 
| 视线 ， 通 常 ， 文 字 导 向 中 的 文字 是 经 过 处 理 的 艺 
| 术 字体 ， 这 样 才能 吸引 访客 的 注意 。 使 用 文字 导 
| 向 视觉 流程 通常 重点 突出 、 条 理 清晰 ， 能 够 直接 


| 手势 导向 视觉 流程 是 利用 画面 中 人 物 的 手势 来 引 
| 导 访客 的 视线 ， 这 种 视觉 流程 更 具有 指向 性 ， 导 
; 向 效果 更 好 ， 而 且 能 够 使 画面 显得 更 生动 、 亲 切 。 


息 坟 号 人 


| 指示 导向 是 指 利用 具体 的 形象 或 抽象 的 符号 来 引 
| 导 访 客 的 视线 ， 它 可 以 让 画面 的 信息 浏览 层次 更 
i 加 清晰 、 明 确 。 
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动 训 全 辣 副 翰 注 
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骨骼 型 的 网 页 布局 方式 是 一 种 规范 的 、 理 性 的 布局 方式 。 常 见 的 骨骼 型 布局 有 坚 
向 通栏 、 双 栏 、 三 栏 、 四 栏 和 横向 的 通栏 、 双 栏 、 三 栏 、 四 栏 等 ,一 般 以 坚 向 分 栏 居多 。 
外 用 在 一 些 个 性 化 或 大 型 论坛 网 页 中 ， 具 有 结构 清晰 、 内 容 一 目 
点 ， 是 一 种 即 理性 又 和 谐 ， . 活泼 而 富有 弹性 的 布局 方式 。 


STATUS: 4 LONG WAY OFF 


“| 色 为 背景 ， 青 色 与 黑色 的 矢量 风格 插画 | 
| | 给 人 一 种 率 性 、 张 扬 的 视觉 感受 。 整 个 | 
主要 内 容 主要 内 容 主要 内 容 | | 画面 分 为 三 栏 ,整体 造型 简约 ,一目 了 然 。| 


转 CMYK=100.100.100.100 RGB=0.0.0 
辆 CMYK=67.0.45.0 RGB=13.213.178 
品 


! 
! 
i 


1 
! 
| 


| 


| 设计 理念 : 该 网 页 采用 骨骼 型 的 布局 | 
| 方式 ， 共 分 为 三 栏 ， 每 一 栏 的 布局 都 是 相 | 
| 同 的 ， 整 体 给 人 一 种 视觉 上 的 统一 感 。 ”| 
| 色彩 点 评 : 粉红 色 一 向 是 偏 女 性 的 | | 
| 颜色 ， 该 网 页 以 粉色 为 主 色调 ， 整 个 画 | 
| 面 都 荡 泣 着 女性 的 气息 。 

| 傣 这 是 一 个 女性 主题 的 网 页 设计 ， | 
| 粉色 调 的 配色 和 可 爱 的 界面 设计 都 能 够 | 
| 吸引 女性 的 注意 。 

| 例 该 网 页 中 所 要 表现 的 信息 内 容 较 
| 多 ， 选 择 骨骼 型 的 布局 方式 ， 能 够 对 这 这 是 一 个 企业 网 站 ， 淡 青色 的 配色 


1 
! 
! 
! 
! 
| 


可 


| 些 信息 非常 有 条 理 地 进行 表达 。 给 人 一 种 清新 、 理 智 的 感觉 。 企 业 的 网 
| 。” 例 在 该 网 页 中 还 有 黄色 、 绿 色 和 青 j | 站 应 该 表现 出 一 种 稳重 、 积 极 的 视觉 印 | 

| 色 作为 点 缀 色 ， 这 样 的 搭配 让 画面 显得 象 ， 采用 骨骼 型 的 布局 可 以 很 好 地 突出 | 
| 更 加 具有 活力 。 | 


这 一 主题 。 
| EE CMYKRK=0.64.39.0 RGB=253.127.127 

| CMYK=0.22.10.0RGB=254.218.218 

| EE CMY K=28.93.85.0 RGB=189.50.50 

| EU CMYK=62.54.51.1 RGB=117.116.116 

| 和 CMYK&=7.28,90,0 RGB=250.198.0 CMYK=60.16.6.0 RGB=103.184.229 

| 和 CMYK=7.28.90.0RGB=-250.198.0 CMYK=0.0.0,0 RGB=255,255.255 

| EN CMYK=51.0.52.0 RGB=130,227.156 } ;CMYK-20,2.7.0 RGB-215.237.241 


加 CMYK=48.32.32.0 RGB=150.162.165 
CMYK=53.8.19.0 RGB=127.199.213 


网 页 设计 的 视觉 流程 一 一 散 点 视觉 流程 


散 点 视觉 流程 是 指 图 与 图 、 图 与 文 之 间 自 由 分 散 地 排列 ， 呈 现 出 无 序 、 感 性 、 个 
性 的 形式 。 这 样 的 阅读 过 程 常 给 人 以 活跃 、 自 在 、 生 动 有 趣 的 视觉 体验 。 


散 点 视觉 流程 在 页 面 编排 中 , 要 注意 视觉 元 素 之 间 的 风格 或 表现 


以 确保 页 面 效 民 


的 统一 。 


Getting Git Right 


有 共同 特点 ， 


多 


却 计 号 辣 习 山 攻 站 


击 否 导 村 刺 惑 骨 日 


优秀 的 网 页 版 式 能 够 通过 各 种 造型 元 素 、 色 彩 、 纹 理 、 空 间 的 层次 和 布局 去 表现 
网 页 的 外 观 ， 使 其 产生 和 谐 目 具有 视觉 冲击 力 的 效果 ， 从 而 引起 访客 的 注意 ， 并 对 网 
页 产生 浓厚 的 兴趣 。 在 对 网 页 进行 设计 的 过 程 中 , 可 以 通过 一 些 技巧 , 让 布局 更 加 合理 ， 
让 信息 传递 更 加 精准 。 


Tuned to you. 
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bcused, be present 


对 比 是 把 具有 明显 差异 、 矛 盾 和 对 立 的 双方 安排 在 一 起 ， 形 成 一 种 反差 效果 。 如 
面 中 没有 对 比 ， 那 么 访客 的 注意 力 就 会 迷失 在 网 页 中 ， 找 不 到 重点 。 在 网 页 设计 
可 以 通过 图 片 、 颜 色 和 字体 来 形成 对 比 。 


Bo 
时 


@& 图 片 反差 


对 于 这 个 时 代 而 言 ， 图 片 变 成 了 一 种 新 的 阅读 内 容 。 图 片面 积 大 时 ， 画 面 效 果 
活 汉 ;图 片面 积 小 时 ， 画 面 效果 严肃 。 根 据 网 页 的 内 容 去 设 定 图 片 的 面积 ， 可 以 得 


区 


| 为 它 比 其 他 图 案 的 
| 位 置 显 ， 而 且 面积 | 
; 也 较 大 ， 所 以 这 种 反 | 


地 计 号 疝 避 贡 了 汕 


| 差 让 它 更 容易 被 访客 | 


| 注意 到 。 


， 利 用 颜色 的 反差 让 画面 形成 对 比 ， 让 主题 突出 ， 形 
9 色 明度 的 反差 、 颜 色 


| “着 到 该 网 页 ， 我 
i 们 首先 会 注意 到 有 彩 
| 色 的 图 像 ， 这 是 有 彩 | 
| 色 和 无 彩色 的 对 比 效 | 

| 果 ， 而 且 有 彩色 的 图 | , 民 ， 
| 片面 积 较 大 ， 这 也 使 | 

| 得 它 能 够 更 加 引 人 | 


每 一 种 字体 都 有 自己 不 同 的 性 格 特点 ， 所 以 在 使 用 时 ， 要 根据 其 形象 的 特质 进行 
a 那么 就 该 避免 不 同 信息 等 级 使 用 同样 的 字体 和 字号 
人 传递 效果 变 得 模糊 。 


WR ee 
| 体 ， 字 形 流畅 、 豪 放 ， | 
| 给 人 一 种 很 洒脱 的 视觉 | 
| 感受 。 而 下 方 的 段落 文 | 
| 字 则 整齐 、 规 范 ， 这 就 | 
| 形成 了 一 种 字体 反差 六 


重复 的 视觉 元 素 有 强调 的 作用 ， 可 以 给 用 户 带 来 一 种 有 组 织 、 一 致 性 的 体验 。 网 
页 中 元 素 的 重复 可 以 使 页 面 内 容 显 得 连贯 ， 有 助 于 提升 品牌 形象 。 重 复 的 视觉 流程 适 
用 于 一 些 份量 相同 、 信 息 等 级 相同 的 视觉 元 素 ， 例 如 介绍 一 组 产品 、 系 列 事物 等 。 
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在 网 页 中 ,每 样 商 品 都 占据 一 栏 ,每 一 栏 的 大 小 、 版 式 都 相等 ,这 就 是 一 种 重复 效果 。 
复 的 效果 各 RAT 种 整齐 、 清 晰 、 有 条 理 的 视觉 印象 。 


ZTEEEE 


把 网 页 中 的 内 容 进 行 分 类 , 然后 进行 重组 ,这 对 整个 网 页 的 信息 优化 是 非常 重要 的 。 
掌握 分 类 的 技巧 ， 可 以 让 网 页 中 的 信息 更 加 明确 ， 让 访客 更 容易 掌握 这 些 信息 。 


虹 


滑 qeeega [sass ~ Q (的 | 


ED 。 32 = 村 7 册 下 2 和 2 our 习 a 


主要 信息 占据 大 
排列 ， 可 以 让 画 


该 网 页 利 


其 他 信息 占 比 较 小 。 


网 页 布局 方式 对 繁杂 的 信息 进行 归 类 , 主 
这 样 将 信息 分 类 ， 有 层级 地 进 和 


面积 的 页 
面 更 


旅游 主题 网 页 设计 


效果 说 明 : 


该 网 页 采用 青色 为 主 
色调 ， 以 蓝 色 、 
助 色 ， 以 红色 为 点 缀 色 ， 
整体 突出 了 活力 、 阳 光 的 
个 性 。 网 站 风格 简单 统一 ， 
能 够 让 大 多 数 访客 接受 。 
网 页 中 的 内 容 结构 和 布局 
非常 清晰 ， 能 够 让 访客 方 
便 快 捷 地 获取 所 需 信息 ， 


实用 性 较 


强 。 


商家 要 求 : 


令 从 用 户 的 角度 去 设计 网 页 的 布局 , 能 够 让 访客 轻松 、 全 面 地 浏览 网 页 中 的 内 容 。 
令 整体 布局 简单 实用 ， 有 利于 访客 的 浏览 。 


令 能 够 将 旅游 项 目 清晰 分 类 ， 着 重 


绿色 为 辅 


令 整体 效果 要 清新 、 自 然 ， 突 出 主 


解决 方案 : 
4 设计 者 将 网 页 制作 成 时 下 较为 流行 的 长 网 页 ， 通 过 滚动 鼠标 中 轮 去 翻动 网 页 ， 


可 以 省 去 


ff 


介绍 主打 产品 。 
题 。 


户 寻 找 选 项 的 时 间 ， 便 于 用 户 使 用 。 


色调 能 够 让 人 联想 到 自 


令 骨 侣 型 的 布局 方式 条 理 非 常 请 晰 ， 在 每 一 栏 中 都 有 属于 自己 的 专题 。 
E 品 整体 1 


然 、 阳 光 、 放 松 、 自 由 的 感觉 。 红 色 的 点 缀 色 


在 了 小 标题 、 按 钮 的 位 置 ， 在 白色 的 背景 衬托 下 ， 显 得 非常 醒目 。 


有 
EH 


却 讨 号 辣 习 坤 了 溃 


9 


串 州 平 总 只 型 昼 悦 


该 网 页 采用 通栏 型 的 布局 方式 ， 这 种 方式 ; 
采用 由 上 至 下 横向 排列 ， 整 体 结构 清晰 。 | 
®@ 在 如 今 的 宽屏 时 代 ， 通 栏 型 的 布局 方式 应 ; 
运 而 生 ， 这 种 布局 方式 的 特点 是 布局 开 | 
阔 、 大 气 ， 在 细节 上 有 了 更 多 的 灵活 性 。 | 


| 。 网 页 以 青色 为 主 色调 ， 将 这 种 色调 应 用 在 | 


旅游 主题 网 页 设计 中 ， 代 表 着 自然 、 清 
新 、 自 由 。 


| @ 网 页 的 Banner 采用 整 幅 大 图 作为 主体 


通过 图 形 语言 去 宣传 景区 特点 ， 这 样 的 做 | 
法 更 具 说 服 力 ， 也 更 有 代入 感 | 


ie 该 网 页 采用 拐角 型 的 布局 方式 ， 网 站 项 
部 为 网 站 标志 、 导 航 栏 ， 接 着 是 网 页 的 : 
Banner， 下 方 为 网 页 中 的 主要 内 容 。 整体 ; 
条 理 清晰 ， 网 页 内 容 信息 量 较 大 。 | 
网 页 以 青色 为 主 色 调 ， 青色 的 Banner 和 |; 
淡 青色 调 的 背景 在 色相 上 形成 呼应 ， 在 明 : 
度 上 形成 对 比 ， 整 体 效果 和 谐 、 统 一 。 ”| 
网 页 以 图 像 为 背景 ， 选 择 图 像 为 背景 能 够 ; 
让 网 页 看 上 去 内 容 丰 富 、 层 次 分 明 。 但 是 i 
处 理 不 好 会 让 画面 效果 显得 凌乱 ， 没 有 主 | 
次 。 在 该 网 页 中 ， 通 过 降低 图 像 纯度 的 方 ; 
法 将 前 景 凸显 出 来 。 | 


该 网 页 采用 口 字 型 的 布局 方式 ， 将 网 页 中 ， 
的 主要 内 容 集 中 在 一 起 ， 信 息 量 较 大 。 | 
® ”在 该 网 页 中 ， 导 航 栏 和 主要 内 容 之 间 有 较 ， 

大 的 距离 ， 从 而 减轻 了 内 容 过 于 紧凑 的 压 | 

迫 感 。 | 
日 网 页 以 风景 图 片 作为 背景 ， 这 样 的 设计 既 ， 

能 丰富 画面 的 内 容 ， 又 增加 了 网 页 的 层 | 
| 次 感 。 | 
| @ 网 页 中 使 用 了 大 量 的 图 标 按钮 和 图 像 按 | 
| ” 钮 ， 这 样 的 应 用 可 以 让 页 面 内 容 更 好 理 | 
解 ， 从 而 增加 了 网 页 的 灵活 性 。 | 


这 是 网 站 的 首页 ， 网 页 中 以 精美 、 高 清 的 | 
图 片 作为 背景 ， 整 体 给 人 一 种 大 方 、 舒 展 | 
的 感觉 。 | 
@ ”网 页 追求 一 种 简单 、 清 新 的 感觉 ， 导 航 栏 } 
| 。 造型 简约 ， 与 整个 页 面 的 风格 相 呼应 。 ”| 
| @ 网 页 中 阳光 、 沙 滩 、 海 浪 这 些 美景 引 人 | 
i ”产生 企 想 。 | 

| @ ”网 页 整体 以 青色 为 主 色调 ， 搭 配 上 白色 的 | 

| 。 导航 栏 ， 整 体 上 给 人 一 种 干净 、 清 爽 的 视 | 
5seuPT?as | 觉 感受 。 | 


二 量 萄 ”其 他 旅游 网 站 布局 解析 


该 网 页 为 海报 型 布局 方式 ， 网 页 以 高 清 的 大 图 作 
为 背景 ， 富 有 意境 的 图 片 通过 透视 关系 给 人 很 强 
的 代入 感 。 
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却 计 号 辣 避 超 了 小 


东 豆 生字 区 圳 上 日、 


圳 州 半 汉中 到 别 于 


:网 页 中 文字 信息 较 多 ， 采 用 拐角 型 的 布局 方式 可 
;以 容纳 更 多 的 文字 信息 ， 同 时 可 对 内 容 进行 分 类 
; 让 页 面 信息 更 具有 条 理性 


uv 


该 网 页 虽然 为 口 字 型 的 布局 方式 ， 但 是 为 了 避免 
主体 内 容 过 于 拥挤 ， 图 片 在 边缘 做 了 虚 化 处 理 
给 人 一 种 视觉 上 的 延伸 感 


: 该 网 页 为 骨骼 型 布局 方式 ， 给 人 的 第 一 感受 是 整 
i 齐 、 井 然 有 序 。 排 列 整齐 的 图 案 和 按钮 ， 让 访客 
i 在 浏览 网 页 时 ， 能 在 第 一 时 间 找到 相应 的 信息 


却 计 全 辣 避 需 了 小 


不 同行 业 的 网 页 色 条 


网 络 世界 和 现实 世界 一 样 五 光 十 色 、 绚 丽 缤纷 ， 访 客 对 网 页 的 第 一 印象 往往 来 自 于 
色彩 。 而 网 页 颜色 的 选择 ， 通 常 源 自 于 设计 者 对 行业 的 认 知 和 对 生活 经 验 的 总 结 。 针 对 
不 同行 业 ， 有 着 不 同 的 选择 标准 ， 它 是 有 规律 可 循 的 。 在 网 页 的 色彩 搭配 上 ， 可 以 遵循 
以 下 几 点 原则 。 

(1) 色彩 的 代表 性 。 

在 网 页 中 ， 必 须 有 一 种 或 一 类 颜色 可 以 去 传递 网 页 的 主旨 和 精神 ， 这 样 才能 
让 网 页 的 主题 突出 。 例 如 ， 用 蓝 色 体现 科技 型 网 站 的 专业 ， 用 粉红 色 体现 女性 的 
柔情 等 。 

(2 ) 色彩 的 独特 性 。 

虽然 不 同行 业 的 色彩 选择 是 有 规律 可 循 的 ， 但 打破 常规 的 颜色 往往 会 形成 一 
种 独特 的 风格 ， 使 访客 眼前 一 亮 ， 从 而 留 下 深刻 的 印象 。 

(3 ) 色彩 的 艺术 性 。 

网 页 设计 也 是 一 项 艺术 创作 ， 在 考虑 网 页 自身 特点 的 同时 ， 进 行 大 胆 的 艺术 
化 创新 ， 才 能 设计 出 一 个 既 符 合 主题 ， 又 充满 艺术 品位 的 网 页 。 

(4 ) 色彩 的 鲜明 性 。 

一 个 具有 鲜明 色彩 的 网 页 设计 ， 才 能 引起 访客 的 注意 ,给 人 耳目 一 新 的 视觉 
感受 。 


Ce oe ee se he he 


Ey 


作为 商业 网 站 ,服饰 类 的 网 页 设计 就 是 要 将 商品 展示 给 


i 色 ， 针 到 


页 的 色彩 、 网 页 的 布局 进行 体现 。 通 常 


在 网 页 颜色 的 确定 中 ， 会 根据 


泽 网 页 的 


中 年 人 时 ， 可 以 选择 一 些 柔 和 和、 理性 的 


配色 ， 例 如， 网 页 的 布局 方式 较为 多 元 化 时 ， 


色 方 案 ; 


选择 。 例 如 ， 服 装 针对 年 轻 人 时 ， 在 网 
站 


而 布局 方式 较为 简约 时 ， 则 可 以 选择 单 


色 上 可 以 选择 鲜艳 、 亮 丽 


有 户 , 刺激 他 们 的 购买 欲望。 
义 ， 对 于 服饰 类 的 网 页 设计 ， 最 重要 的 一 点 是 将 商品 最 完美 的 一 面 展现 出 来 。 这 就 
需要 通过 网 
的 定位 进行 


民 装 


丽 的 


色 
颜色 。 还 可 根据 网 页 的 布局 方式 去 
可 


头 选 择 对 比 色 或 互补 


色 的 


色 配 色 或 类 似 色 的 配色 。 
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5.1.1 活泼 风格 的 网 页 设计 


活泼 风格 的 服饰 网 站 大 多 针对 年 轻 人 ,所 以 在 布局 和 颜色 的 选择 上 都 要 标新立异 。 
通常 会 选择 亮丽 的 颜色 ， 在 布局 方式 的 选择 上 也 力求 形式 新 颖 、 内 容 丰富 ， 这 样 才 能 
够 赢得 年 轻 人 的 喜爱 。 


度 对 比 的 方式 进行 配色 ， 背 景 处 的 风 ; 
景 图 片 为 灰色 调 ， 所 以 可 以 将 前 景 中 的 ; 

录 色 突出 ， 达 到 一 种 对 比 效果 。 : 
| 侠 这 是 一 个 户外 服装 的 网 页 ， 所 以 | 
| 在 颜色 的 取舍 上 选择 了 蓝 色 、 绿 色 等 这 ; 
| 样 来 自 自然 的 颜色 。 : 
| 侠 因 为 该 网 页 中 的 内 容 比较 少 , 所 以 
| 才 用 “ 口 ” 字 型 的 布局 方式 ， 不 会 拥挤 。 | 


一 - 和 页 标志 与 纪 | 
| 设计 理念 :该 网 页 为 “ 口 ” 字 型 的 | 要 你 多 全 开放 
| 布局 方式 ， 将 所 有 的 内 容 都 集中 在 一 个 | | CMYK=22.8.6.0 RGB=208,224,236 | 


: 窗 中 。 这 种 布局 方式 可 以 将 用 户 的 | | I CMYK=61.0.47.0 RGB=94,205,166 
| 视线 集中 在 一 处 ， 非 常 有 针对 性 。 | CMYK=13.95.96.0 RGB=225.37.27 


CMYK=12.9.9.0 RGB=230,230,230 


HEAVY DOWN 


HD 人 从 ，; 林 
调 可 以 给 人 一 种 厚重 、 踏 实 的 感觉 , 所 ; 
以 背景 色 选 择 了 灰色 。 在 前 景 中 ,广告 | 
图 片 的 背景 为 高 明度 的 色彩 ， 这 不 仅 能 | 
够 很 好 地 凸显 商品 ， 还 能 增加 颜色 的 对 ; 
比 效果 ， 让 画面 效果 更 加 丰富 多 彩 。 


| ”在 该 网 页 中 ,整体 颜色 是 比较 干净 、 
i 清爽 的 ， 搭 配 上 红色 、 青 色 的 点 缀 色 ， 
让 整个 画面 显示 出 年 轻 、 朝 气 的 感觉 。 


国 CMYK=11.88.48.0 RGB=229.61.96 

| 国 CMYK=58.13.33.0 RGB=114.186.183 
| CMYK=72.8.19.0 RGB=4.185.216 

| 国 CMYK=4.74.55.0 RGB=242.102.94 

| CMYK=19,18,27.0 RGB=216.209.189 
| 站 CMYR=0.0.0.0 RGB=255.255.255 | 


国 CMYK=26.77.67.0 RGB=202.90.78 
CMYK=10.23.66.0 RGB=241.206.103 
器 CMYK=6.7.11.0 RGB=243.239.230 
国 CMYK=73.69.69.31 RGB=74.69.65 


| 


5.1.2 极 简 风格 的 网 页 设计 


极 简 风 格 是 一 种 简单 到 极致 的 设计 风格 ， 它 追求 视觉 上 的 简约 整洁 ， 有 着 自己 独 
特 的 品位 。 极 简 风格 不 是 “无 ”， 而 是 一 种 “以 少 胜 多 ”。 极 简 风格 握 弃 一 切 无 用 的 


细节 , 保留 最 本 真 、 最 纯 术 的 部 分 。 这 种 风格 通常 会 采用 “ 留 白 ”的 手法 去 突出 主体 ， 
在 布局 方式 上 也 干净 、 利 落 ， 不 拖泥带水 。 


| 设计 理念 ， 该 网 页 采用 极 简 风 格 的 。 侈 网 页 内 容 虽然 简约 ， 但 是 网 页 细 
| 设计 方式 ， 简 约 的 构图 方式 给 用 户 一 种 | 节 且 非常 丰富 ， 例 如 文字 字形 变化 ,可 | 
| 清 严 、 简 洁 的 用 户 体验 。 | 爱 的 心 形 图 标 等 。 
| 色彩 点 评 :该 网 页 以 白色 作为 主 色 | ，” 例 对 于 页 由 的 处 理 ， 网 页 采用 图 片 | 
| 调 ， 以 红色 和 亮 灰色 作为 点 缓 色 ， 这 两 的 形式 ， 并 在 下 方 制作 出 不 规则 的 边缘 
| 种 不 同感 觉 的 颜色 搭配 在 一 起 ， 给 人 一 | 效果 ， 是 整个 画面 的 亮点 所 在 。 
| 种 优雅、 如 表 的 感觉 | EECMYK=4.74.55.0 RGB-242.102.94 
CMYK=0.0.0.0 RGB=255,255,255 

: 滩 rd 代表 女性 的 CMYK=23.18.17.0 RGB=204.204.204 | 


: EECMYK=68.17.10.0RGB=62.176.223 | 


| 这 是 一 个 女装 网 站 ， 以 白色 为 主 色 
| 调 ， 整 个 画面 给 人 的 感觉 是 干净 利落 | ， 利用 极 简化 的 构图 据 弃 开 辽 的 内 容 ， 夫 | 
| 的 。 白 色 代 表 “ 静 ”， 人物 代 表 “ 动 ”，; | 繁 就 简 ， 以 获得 更 简洁 明快 的 空间 。 | 
| 这 样 以 静 衬 动 的 方式 ， 可 以 让 画面 内 容 = 

| 更 加 丰富 。 


: ES 转 CMYK=8s.55.81.22 RGB=26.89.67 

| 转 CMYK=76.70.67.33 RGB=65.65.65 

| 转 CMYK=77.70.67.33 RGB=63.65.66 加 CMYK=2.61.82.0 RGB=247.133.47 
CMTYK=7.4.0.0 RGB=241,244,.251 CMYK=30.16.14.0 RGB=190.204.213 
CMYR=0.0.0.0 RGB=255.255.255 i | [CMYK=0.0.0.0 RGB=255.255.255 


山 5 跟 


型 六 六 臣 六 司 要 层 汗 可 说 


网 页 设计 的 流行 趋势 一 简单 的 配色 


配色 简单 的 网 页 设计 通常 使 用 一 种 明亮 和 干净 的 颜色 作为 背景 颜色 ， 给 人 一 种 简 
约 、 利 落 的 感觉 。 而 且 这 样 的 设计 方法 ， 通 常 内 容 精 巧 、 简 练 ， 主 题 非常 突出 。 


<lab21/> 村 


击 要 淋 李 遍 束 加 目 : 
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服饰 类 网 页 设计 赏析 


Semplici Scarpe da donna? 
No, creazioni esclusive 


多 


容 、 护 肤 类 网 页 设计 


关于 美容 、 护 肤 类 的 网 页 设计 ， 主 要 针对 的 访客 是 女性 ， 所 以 在 设计 的 过 程 中 要 
重视 女性 的 心理 。 女 性 是 一 个 多 姿 多 彩 的 群体 ， 在 网 页 设计 中 ， 要 尽量 体现 出 现代 女 
性 热爱 生活 、 展 现 自我 的 一 面 。 在 网 页 配色 的 选择 上 ， 一 方面 要 配合 商品 的 颜色 ， 另 
一 方 要 能 体现 出 女性 性 格 ， 例 如 彩妆 网 页 适合 选择 颜色 艳丽 、 视 觉 冲 击 力 强 的 颜色 ， 
护肤 品 适合 较为 柔和 、 清 濑 的 颜色 ， 这 样 才能 体现 出 呵护 、 保 养 。 


LESSON MAKEUP PROCOURSE RESERVE ACCESS 


型 洲 站 路 辣 到 避 上 后 站 可 斗 朝 9 嘻 


5.2.1 浪漫 风格 的 美容 、 护 肤 类 网 页 设计 


浪漫 风格 的 网 页 通常 色彩 轻柔 ， 颜 色 明 度 较 高 ， 纯 度 较 低 。 这 样 的 色彩 搭配 通常 
给 人 一 种 非常 柔软 、 浪 漫 的 感觉 ,访客 人群 可 以 定位 于 少女 、 轻 熟女 。 


一 


‘ 
\ 


点 评 : 在 该 网 页 中 ， 浅 灰 灰色 和 | 
色 的 搭配 形成 一 种 非常 温柔 的 色彩 


AGOUIA 


例 网 页 中 ， 洋 红色 作为 点 缀 色 , 体 ! 
现 出 女性 美丽 、 细 腻 的 一 面 。 
| 傣 该 网 页 给 人 的 第 一 印象 是 非常 饮 ; 
| 满 的 , 这 种 饱满 主要 来 自 于 广告 , 其 中 ， 
网 页 主要 的 信息 位 于 网 页 的 底部 ， 虽 然 ; 
内 容 较 少 ， 但 是 针对 性 较 强 。 
电 | 鲍 网 页 中 ,文字 的 排版 也 非常 重要 ， 
该 网 页 为 网 站 的 首页 设 i 
i 计 ， 网 页 中 四 位 美 Tere tt 
| 引力 ， 她 们 或 可 爱 、 或 调皮 、 或 性 感 ，| 


es 


业 ducrd by COCO KINOBHITA 


SECRET ™e COCOMAGI GIC 


| : CMSYK=7.6.7.0RGB=241.240.238 

| 非常 契合 彩妆 这 一 主题 : : 
| 和 主题 。 省 用) 打开 网 | CMYK=27.2.17.0 RGB=199.230.222 | 
; 页 后 ， 会 有 一 种 开门 见 山 的 感觉 ， 忍 不 ; : 


: EE CMYK=16.97.21.0 RGB=222.1.122 
28,8.0 RGB=212.192,211 


地 想 去 深入 了 解 网 站 的 内 容 。 


| 巍 D 放 尺 艺 达 知 万 
i 入 7YAU 工 
i; 站 付 0D 肥 入。 


| 站 的 首页 ， 丰 富 的 画面 
i 内 容 ， 给 人 一 种 充实 、 饱 满 的 印象 。 画 
| 面色 调 干 净 、 素 雅 ， 几 抹 淡 痰 的 绿色 和 
| 粉红 色 ， 给 页 面 增添 了 几 分 浪漫 之 感 。 
| 画面 中 代言 人 手持 商品 ， 广 告 的 诉求 效 
| 果 非 常 强烈。 


| 国 CMYK=71.32.100.0 RGB=87.144.24 
| 转 CMYK=77.83.89.69 RGB=36.21.14 

| 国 CMYK=15.56.89.0 RGB=226.136.38 
| 站 CMYK=3.2.0.0 RGB=249.250.254 


该 网 页 整体 为 粉色 调 ， 这 种 淡雅 的 : 
颜色 给 人 一 种 浪漫 、 清 新 的 感觉 。 该 | 
网 页 为 单 色 调 的 配色 方案 ， 通 过 同色 | 
系 的 颜色 变化 ， 营 造 了 一 种 优雅、 温 


国 CMYK=45.77.40.0 RGB=163.85.116 
CMYK=13.10.7.0 RGB=227.228.233 
国 CMYK=70.69.59.17 RGB=91.80.86 


5.2.2 典雅 风格 的 美容 、 护 肤 类 网 页 设计 


典雅 风格 通常 耀眼 而 不 妖媚 ， 庄 重 而 不 上 暗 沉 ， 和 象征 着 高 端 、 品 味 。 这 类 风格 通常 
能 够 展现 出 构建 美好 生活 的 积极 态度 。 


i 、 | 是 一 种 性 格 刚烈 而 外 向 、 刺 激 性 很 强 的 ; DE 
| 四 | 颜色 。 | 
| 合金 色调 的 网 页 颜色 不 仅 与 商品 的 ; 
| 颜色 相 呼应 ， 而 且 给 人 一 种 奢华 、 高 端 


| 的 感觉 。 | 第 
| 作 该 网 页 采用 “ 口 " 字 型 的 布局 方式 ,| 章 

| 将 网 页 的 内 容 集中 在 窗口 中 ,给 人 一 种 | 
| 充实 的 感觉 。 | 不 
| 俐 “ 口 ” 字 型 的 布局 方式 很 容易 显 : 

i 得 晶 是 在 该 网 页 中 ， 背 景 和 | 
设计 起， 在 该 册页 中 ， 将 总 滥 ， 色 pozfp 和 作出 了 空间 入 的 党， | | 业 
| 放 在 网 页 的 中 心 位 置 ， 然 后 利用 圆 形 的 | MN CMYK=22.22.50.0 RGB=213.,198,141 | 的 
| 框 将 商品 围 住 ， 使 视觉 集中 到 商品 中 。 : CMYK=4.,4.24.0 RGB=251,245,209 | 网 
| 色彩 点 评 : 该 网 页 整体 采用 金色 : EU CMYK=27.39.87.0 RGB=204.163.51 | 页 
i 调 ， 象征 着 光荣 、 华 贵 、 辉 煌 、 财 富 ， | EE CMYK=67.68.90.37 RGB=81.67.40 | : 
拱 
配 


这 是 一 个 美容 美发 的 网 页 设计 ， 灰 | 
色调 的 配色 给 人 一 种 典雅 .亲切 的 感觉 。| 
简约 的 构图 方式 能 够 让 用 户 迅 速 地 了 解 


信息 : 


圆 CMYK=7.4.9.0 RGB=242.244.237 
CMYK=15.34.37.0 RGB=224.182.156 
国 CMYK=91.87.87.78 RGB=4.4.4 

国 CMYK=74.72,.77.44 RGB=62.55.47 


| 该 网 页 非常 直观 地 表达 了 这 是 一 个 
| 美发 主题 的 网 页 设计 ， 该 网 页 虽然 深 颜 
| 色 占 据 了 大 面积 ， 但 是 脸 部 的 高 亮度 让 
| 画面 颜色 不 会 显得 昏暗 。 


| 国 CMYK=60.69.70.18 RGB=113.82.71 
| 国 CMYK=70.75.82.49 RGB=65.48.38 

| 国 CMYK=91.87.87.78 RGB=4.4.4 
:CMYK=0,25,24.0 RGB=254.210.189 


网 页 设计 的 流行 趋势 一 一 背景 模糊 
背景 模糊 其 实 就 是 一 种 景深 效果 ， 该 设计 方式 通常 会 将 一 张 模糊 的 图 片 作为 背 


景 ， 这 样 前 景 中 的 信息 就 被 突出 出 来 。 而 且 会 让 整个 画面 非常 有 空间 感 ， 能 够 烘托 出 
网 站 所 要 给 用 户 传递 的 氛围 ， 也 能 够 更 加 突出 产品 或 者 人 物 本 身 的 特质 。 


东 豆 守 守 区 圳 归 愉 - 


囊 州 半 交 中型 淹 避 


FUTURE 


配色 方案 


双色 配色 3 三 色 配 色 N 四 色 配 色 \ 
D © 中 
“J 


美容 、 护 肤 类 网 页 设计 赏析 


再 名 sa! 


5.3 食品 类 网 页 设计 


食品 类 的 网 站 设计 主要 是 能 够 从 网 站 的 色彩 去 揭示 网 
的 色彩 就 能 基本 上 感知 或 者 联想 到 网 站 的 主题 。 食 品类 网 
食品 看 上 去 十 分 美味 可 口 ， 从 而 激发 人 们 的 食欲 。 


站 的 主题 ， 
页 设计 最 如 


让 用 户 通过 网 站 


要 的 特点 ， 是 让 


5.3.1 


颜色 对 人 的 心理 有 刺激 性 的 作用 ， 从 颜色 的 


黄色 、 浅 黄 


写实 风格 的 食品 类 网 页 设计 


特征 上 来 看 ， 蛋 糕点 心 类 多 以 金色 、 
象 


色 给 人 以 香味 柳 人 的 印象 ; 茶 、 啤 酒 类 等 饮料 多 用 咖啡 色 或 绿色 类 ， 


钊 到 关 | 虽 | 皇 women 


冷饮 食品 的 包装 采用 具有 


严 感 和 冰雪 


着 荣 的 浓郁 和 芳香 ; 西瓜 汁 、 蔷 果 计 多 用 红色 ， 这 种 颜色 能 表现 出 可 口 、 香 天 的 感 ; 
白色 ， 可 突出 食品 的 冷冻 和 卫 委 


; 网 页 布 


| 左 侧 为 


单 明 了 的 


:局 


EE CMYK=! 


有 刺激 性 的 作用 。 该 网 


1.98.100.0 RGB=230.0.0 


合同 页 中 少量 的 黄色 与 主体 颜色 形 | 
的 对 比 。 | 
丛 该 网 页 采用 单 色调 的 配色 ， 以 红 ; 
为 主 色调 ， 利 用 深 红色 作为 点 缀 色 ， | 

页 中 同色 系 的 颜色 变化 形成 了 空间 的 

层次 感 
全 作为 食品 类 的 网 页 设计 ， 图 片 
正文 型 的 | 选择 是 非常 重要 的 。 图 片 一 定 要 最 能 
ttt 现 出 食品 美味 、 可 口 的 一 面 。 


TCMYK 一 46.100.100.18 RGB=146.0.0 | 


红色 是 非常 刺激 的 颜色 ， | CMYK=61.100.100.59 RGB=70.0.2 
CMYK=5.36.77.0 RGB=249.184.67 


册 5 嚣 ， 


人 


型 诸 缠 区 六 司 于 层 当 可 志 


民 | 


EEC 


| 俯视 图 的 方式 进行 拍摄 ， 这 样 的 视角 给 
人 一 种 截然 不 同 的 视觉 休 验 。 去 网 页 以 淡 咖 看 色 为 主 色调 ， 这 
a 颜色 不 仅 能 联想 到 巧克力 的 香 醉 、 丝 滑 

香甜 的 口感 ， 还 与 食品 的 色调 相 呼 应 。 


| 国 CMYK=54.74.98.25 RGB=119.71.35 
| DCMYK=0.0.0.0 RGB=255.255.255 
| 国 CMYK=72.58.100.24.RGB-81.89.20 
| 国 cMYK=72.58.10024RGB-81.89.20 回 ] CMYK=0.0.0.0RGB=255.255.255 
| 国 cMYK=40.8g.100.5 RGB=171.61.22 ; 国 CMYK=41.62.74.1 RGB=171.113.76 


国 CMYK=s1.86.86.73 RGB=27.13.11 


4 清 青 爽 风格 的 食品 类 网 页 设计 


清爽 风格 的 网 页 通常 颜色 干净 ,素雅 ,能 够 直 有 限 的 平面 空间 显示 出 无 限 大 的 感觉 。 
清爽 风格 的 食品 网 页 设计 最 大 的 好 处 在 于 能 够 以 很 纯粹 的 方式 去 展示 食物 ， 让 访客 在 
不 受 外 界 影响 的 情况 下 去 了 解 网 站 中 的 内 容 。 


| ”设计 理念 在 流风 页 中 ， 硼 痪 六 为 ] 表 训 ， 令 信访 避 樟 记 | 
食品 的 图 片 ， 这 种 方式 可 以 让 用 户 更 加 例 网 页 中 大 面积 的 留 白 ， 让 用 户 的 : 
| 直观 地 了 解 网 站 的 内 容 。 i 视线 更 加 集中 。 | 
| 色彩 点 评 : 该 网 页 以 白色 为 主 色调 ，; “全 简约 风格 的 网 页 布局 ， 让 用 户 使 ; 
| 然后 搭配 上 灰色 调 的 图 片 ， 这 种 高 明度 : 用 起 来 更 加 方便 。 : 


| 且 对 比 度 较 弱 的 色彩 ,给 人 一 种 轻柔 、: CMYK=16.8.2.0 RGB=221.229.242 | 
| 清 亦 的 视觉 印象 。 : CMyk=12.16.40.0 RGB=234.218.167 | 


铂 网 页 的 色彩 简单 而 清新 ， 清 爽 而 : EE CMYK=38.74.60.0 RGB=177.92.91 
: EE CMYK=81.79.62.35 RGB=56.52.66 


第 

a 

章 

不 

| 该 网 页 以 白色 为 主 色调 ， 以 红色 为 妆 网 页 [4 主 ed 
| 点 级 色 , 整体 呈现 出 简约 、 清 讽 的 感觉 。 | 色 为 点 绎 色 ， 这 样 频 色 的 反差 让 彩色 更 。 | 业 
| 这 样 的 配色 能 够 非常 完美 地 展现 出 食 | | 加 突出 ， 更 方便 用 户 的 使 用 。 | 图 | 的 
| 物 的 特点 。 | | 网 
En MI 
: 天 CMYK=98.93.46.13 RGB=30.47.95 ! 色 
: 转 CMYK=16.99.94.0 RGB=221.6.31 CMYK=18.14.13.0 RGB=216.216.216 彩 
: | | CMYK=9.12.81.0 RGB=248,.224.56 CMYK=11.14.19.0 RGB=232.221,.207 搭 
| 口 CMYK=0.0.0.0 RGB=255.,255,255 | 器] CMYK=0.0.0.0 RGB=255,255.255 配 


网 页 设计 的 流行 趋势 一 一 强调 字体 

文字 既是 语言 信息 的 载体 , 又 是 具有 视觉 识别 特征 的 符号 系统 。 它 不 仅 传递 信息 ， 
也 具有 情感 诉求 。 网 页 中 以 强调 字体 的 方式 去 进行 设计 ， 可 以 给 人 不 同 的 视觉 感受 和 
比较 直接 的 视觉 诉求 力 。 


双色 配色 三 色 配 色 四 色 配 色 


91 二 = 


数码 是 时 代 的 产物 , 所 以 数码 类 的 网 页 设计 通常 要 表现 出 科技 、 严 谨 、 理 性 的 效果 。 
在 数码 类 的 网 页 设计 中 ， 通 常 将 产品 领先 的 科技 作为 第 一 诉求 ， 并 按照 视觉 心理 规律 
和 形式 将 主题 主动 地 传达 给 访客 。 数 码 类 的 网 页 设计 在 颜色 上 是 有 规律 可 循 的。 如 果 
要 表现 出 科技 的 领先 可 以 选择 蓝 色 、 青 色 、 黑 色 或 者 灰色 ; 如 果 产 品 在 定位 上 比较 年 
轻 化， 也 可 以 选择 粉色 、 黄 色 、 红 色 等 色调 。 设 计 此 类 网 页 ， 要 求 设计 者 能 够 单纯 、 
简练 、 清 晰 和 精确 。 在 强调 艺术 性 的 同时 ， 更 应 该 注重 通过 独特 的 风格 和 强烈 的 视觉 
冲击 力 ， 来 鲜明 地 突出 设计 主题 。 


入 App5tore 


54.1 | 


说 到 科技 ， 不 难 联 末 多 的 思维 、 精 巧 的 做 工 、 高 端的 技术 ， 这 些 内 容 都 是 非 
常理 性 的 。 理 性 的 色彩 通常 有 青色 、 蓝 色 、 黑 色 、 灰 色 、 白 色 。 对 于 理性 风格 而 言 ， 
:过 于 花哨 的 颜色 ， 也 不 会 让 画面 颜色 的 对 比 非 常 明 显 ， 通 常会 选择 单 色 配 


和 志 


RAVERATEC 


: : 在 该 网 页 中 ， 网 页 的 本 页 中 ， 青 色 的 光线 装 
i 相对 较 少 ， 商 品 占据 页 面 的 大 部 分 ， 着 商品 ， 让 画面 看 起 来 更 加 灵动 。 
| ee 的 方式 宣传 商品 。 篇 网 页 中 的 色调 较 暗 ， 白 色 
: 蓝 色 或 者 青色 调 是 科技 的 ; 可 以 让 信息 更 好 地 表达 。 

| 代表 颜色 ， 通 常会 给 人 一 种 高 端 、 严 肃 TCMYK 一 88.83.83.73 RGB=15.15.15 
| 视觉 印象。 


I CMYK=95.82.52.20 RGB=24.58.88 

i 而 EN CMYK=72.16.5.0 RGB=16.176,23 

| 匆 该 网 页 为 低 明 度 色彩 ， 颜 色 CMYK=72.16.5.0RGB=16.176.234 
| 蓝 到 青色 的 颜色 变化 ， 给 人 一 种 视觉 上 


CMYR=12.5.5.0 RGB=230.238.241 


NEW AF-S NIKKOR 24-70MM F/2.8E ED VR 
STUNNING PER IND INSPIRATION 


ERFORMANCE NEW 


贡 否 导 半 疝 东 加 日 


该 网 页 给 人 的 第 一 印象 就 是 朴素 ， 
受 有 过 多 的 颜色 ， 也 没 繁杂 的 装饰 。 在 
实 无 华 的 色彩 衬托 下 ， 前 景 中 的 商品 


E 常 突出 。 
| 


CMYK=0,0,0,0 RGB=255,255,255 
CMYR=13.,10,10,0 RGB=228.228,228 
CMYK=25.87.100.0 RGB=204.66.12 
CMYR=16.6,0.0 RGB=222.235.254 


页 
配 
色 
设 
计 
手 
册 


5.4.2 


能 打破 陈规 ， 振 奋 精神 ， 焕 发 激情 。 
式 展示 出 来 。 


Welcome to N Squa el 


En 


oe 


二 要 沁 量 


设计 理念 : 


蔚 了 欢乐 、 朝 气 的 气氛 。 


色彩 点 评 : 该 网 页 以 白色 为 主 色调 ， 


FE 衡 ,然后 以 洋红 、 黄 色 、 青 


新 锐 风 格 的 数码 类 网 页 


根据 访客 不 同 ,网 页 设计 的 风格 也 会 有 不 同 的 》 
因为 这 类 网 站 通 


| 很 有 趣 。 


ME 
| 


Sn ep 
FE 轻 人 的 网 站 ， 插 画 风格 的 网 页 设计 充 | 化 去 衬托 主体 的 同时 ， 
| 面 的 内 容 。 


征 着 、 品 质 
色调 ， 商 品 利用 
背景 的 衬托 下 ， 


et Se 目 在 黑 
显得 非常 有 质感 。 


口 CMYK=0.0.0.0 RGB=255,255,255 
CMYK=42.30.32.0 RGB=163,169,166 
| | CMYRK=100.100,100,100 RGB=0.0.0 


设计 


锐 风 格 通常 表现 得 不 同 凡响 ， 
常 针 对 年 轻 人 ， 所 以 在 设计 中 要 


级 色 , 给 人 一 种 欢乐 、 | 


| 兴奋 的 万 沉 。 


例 画 面 中 通过 多 个 图 像 的 相互 堆 谷 ，| 
合成 一 个 相机 的 形象 ， 这 种 方式 看 起 来 | 
侈 从 整体 上 看 ， 非常 
将 彩色 反衬 | 


网 页 的 色彩 是 
以 白色 为 主 色调 ， 


例 在 画面 中 ,主体 图 形 周围 有 很 多 | 
的 四 形 元 素 ， 它 们 利用 部 色 ， 大 小 的 变 
也 丰富 了 整个 画 | 


CMYK=9.7,7.0 RGB=237.237.237 


| CNMYK=8.92.19.0 RGB=236.38,128 
久 灰 色 作 为 辅助 色 ， 可 以 达到 一 种 色彩 ; qqg CMYK-64.19.5.0RGB-86176228 
色 这 样 ; 


54.204,21 


网 页 中 用 图 风机 的 方法 制作 了 普 
| 景 ， 这 种 方式 能 对 有 限 的 画面 空间 充分 利 
| 用 。 前 景 中 半 通 明 的 文字 拉 开 了 它 与 背景 
| 图 形 的 距离 ， 使 文字 部 分 更 加 突出 。 不 仅 
| 如 此， 这 种 ss 通明 的 图 像 可 以 给 人 一 种 通 
| 通 感 ， 使 画面 看 起 来 不 且 么 沉 间 。 


| DCMYK=3,3,3,0 RGB=248,248,248 
| 国 CMYK=8.92.87.0 RGB=234.47,38 


在 该 网 页 中 , 对 背景 做 了 模糊 处 理 ，| 
这 种 被 模糊 的 图 像 给 人 一 种 空间 的 拉 伸 | 
感 。 而 且 利用 这 种 模糊 的 背景 ， 前 景 中 | 
的 主要 内 容 和 文字 被 很 好 地 突出 出 来 。 | 


贺 CMYK=3.3.3.0 RGB=248,248,248 
CMYRK=3,30,85.0 RGB=255.196.37 
团 CMYK=79.64.60.16 RGB=66.85.89 


! 国 CMYK=81.85.33,1 RGB=80.65.122 : | 转 CMYK=66.15.18.0 RGB=78.179.209 
| CMYRK=12.9,9.0 RGB=229.229.229 


“幽灵 ”按钮 是 一 种 透明 的 按钮 ， 它 
的 特点 是 “ 薄 ” 而 “ 透 ”， 形 成 一 种 “ 纤 
薄 ” 的 视觉 美感 。 这 类 按钮 不 设 底 色 、 不 
加 纹理 ， 按 钮 仅 有 一 层 薄 薄 的 线 框 标明 边 
界 ， 确保 了 它 作为 按钮 的 功能 性 。 这 类 按 
钮 通常 应 用 在 简约 式 的 网 页 设计 中 ， 它 既 
不 影响 网 页 的 整体 效果 ， 又 具有 功能 性 。 


XXX， 
XXXX) 


ES 
HA 


山 5 中 


型 流 染 中 滞 到 号 上 持 间 可 宗 


MA 


Caomntpg 


号 里 卉 名 


汽车 网 站 作为 商业 网 站 ， 它 的 首要 目 上 


以 遵循 以 下 几 点 。 


的 是 将 商品 推销 出 去 。 在 汽车 类 网 站 中 ， 
站 的 首页 都 会 个 磅 磷 大 气 的 网 页 广告 ， 通 常 在 该 广告 中 


Pb 有 对 汽车 款式 的 展示 ，i 
样 做 的 目的 ， 是 让 访客 在 第 一 时 间 内 被 网 


( 1 ) 以 图 形 进行 展示 ， 让 访客 对 车 
(2 ) 要 配 1 
< ( 3 ) 要 着 重 去 展示 产品 的 卖点 。 


:的 整体 情况 有 所 了 解 。 


合 汽车 的 风格 以 及 定位 进行 设计 ， 以 贴近 消费 者 的 审美 情趣 。 


页 中 的 内 容 吸 引 。 在 设计 汽车 类 网 页 时 ， 


NOW WITH 67% 


MORE DOORS. | 一 一 


5.5.1 含蓄 风格 的 汽车 类 网 页 设计 


通常 ， 上 tao 在 颜色 选择 上 也 比较 单纯 ， 例 如 会 选择 
和 含蓄 风格 的 汽车 类 网 页 通常 能 够 


[TEST 


, 例如 文字 字体 
割 线 的 处 理 ， 都 非常 用 心 。 
仿 网 页 中 的 广告 也 是 色彩 的 来 源 ， | 
二 驶 中 的 蓝 色 汽车 在 夕阳 的 余晖 中 格外 | 
闪光 。 | 
人 编 以 图 形 中 可 以 看 出 ,汽车 虽 在 | 


| ”设计 理念 ， 该 网 页 采用 海报 型 的 
| 局 方式 ， 外 观 简约 ， 排 版 大 胆 。 画 
| 帅气 的 大 图 也 让 网 站 的 质感 更 
| 给 人 一 种 自信 、 直 接 的 第 一 
| 有 利于 树立 品牌 形象 。 

色彩 点 评 该 网 页 的 主 色调 为 白色 ， 


; 白色 是 很 谦 皇 、 包 容 的 颜色 ， 它 能 衬 行驶 过 程 中 ， 但 给 人 一 种 安全 、 稳 定 的 ; 
| 它 以 外 的 所 有 颜色 。 所 以 在 该 网 页 中 ， : 理 感受 ， 这 也 是 介绍 商品 时 的 一 个 切 | 
| 在 白色 背景 的 衬托 下 ， 网 页 广告 变 得 点 。 


CMYK= 19.32.43.0 RGB=218.184.147 | 
EU CMYK=53.59.69.5 RGB=140.110.84 | 
TCMYK 一 96.87.42.7 RGB=30.58.106 | 
I CMYK=81.81.86..69 RGB=29.22.17 | 


| 外 醒目 。 
| 俐 对 于 简约 的 网 页 布局 而 言 ， 做 至 
| “简约 ”容易 ， 做 到 “不 乏味 ” 难 ， 
| 以 我 们 还 是 可 以 看 出 ， 该 网 页 


翰 9 溃 


型 那 染 苞 司 司 慨 上 发汗 本 局 


满 版 型 的 布局 方式 通常 给 人 一 种 舒 | 
展 、 辽 阔 的 感觉 。 在 该 网 页 中 ， 灰 色调 | 
的 页 眉 和 导航 给 人 一 种 内 敛 、 低 调 的 视 | 
觉 印 象 。 | 


转 CMYK=82.77.75.55 RGB=39.39.39 
转 CMYK=75.80.87.64 RGB=44.29.21 
CMYK=9.38,56,0 RGB=239,178,117 

园 CMYK=48.48.42.0 RGB=150.134.135 


也 方便 用 上 ! 的 使 用 。 . 网 
9 主 色调 ， 并 以 白色 搭配 ， 
度 的 对 比 ， 产 生 了 极 强 的 视 


CMYK=0.0.0.0 RGB=255,255,255 
CMYK=64.58.100,17 RGB=105.97.28 
CMYK=65.59.58.6 RGB=108.104.100 
CMYK=100.100.100.100 RGB=0.0.0 


5.5.2 高 调 风格 的 汽车 类 网 页 设计 


这 里 所 说 的 高 调 , 并 不 是 贬义 词 , 而 是 一 种 积极 向 上 的 情绪 , 是 年 轻 、 主动 的 情感 ， 
也 是 自信 和 张扬 的 态度 。 在 汽车 类 的 网 页 设计 中 ， 高 调 可 以 通过 不 同 凡响 的 布局 , 或 


B 色 方法 ， 栖 色 和 绿色 产生 了 鲜明 的 对 | 


侈 在 选择 网 页 色调 时 ， 选 择 与 商品 | 
所 : 为 同类 色 的 杰 色 ， 这 样 的 搭配 形成 了 视 : 
| 觉 上 的 统一 感 。 | 
鲍 倾 儿 的 版 面 给 人 一 种 紧张 、 不 稳 ; 


例 在 画面 中 ,橙色 为 主 色 ， 绿 色 为 : 
和 点 级 色 ， 由 于 颜色 面积 的 不 同 ， 所 以 画 : 
; 面 既 有 对 比 ， 又 不 会 显得 凌乱 。 | 
[布局 形式 ， 在 打开 网 页 之 初 ， 就 利用 : ECMYK=-9.6794.0RGB-235.11619 |; 
i 色 和 倾斜 的 版 面 给 用 户 留 下 了 深刻 的 | EE CMYK=32.74.100.1 RGB=191.94.15 | 
: NN CMYK=32.0.82.0 RGB=200.234.58 | 
I CMYK=80.75.73.49 RGB=47.47.47 


比 色 的 


了 对 


Jeep 


i Woo so 


i 


作为 一 款 颜 


| 页 以 灰色 调 作为 背景 颜色 ， 这 样 能 够 通 ; 
过 颜色 的 反差 去 强化 矛盾 ， 引 发 思考 。 


| 国 CMYK=17.77.83.0 RGB=219.91.50 
| 国 CMYK=81.76.74.52 RGB-43.43.43 
| 转 CMYK=8s.79.71.53 RGB=28.39.45 
| 国 CMYK=57.37.36.0 RGB=127.149, 


网 页 设计 的 流行 趋势 一 一 垂直 分 割 分 布 
垂直 分 割 是 将 页 一 分 为 二 ， 这 种 形式 有 对 称 式 的 ， 也 有 非 对 称 式 的 。 随 着 网 页 的 


宽度 变 得 越 来 越 袖 


配色 方案 
三 色 配色 

es a > ee 
ee 
agp cet lg ee 0 
4 4 a 4 
ea rite tt tt 
ee i i i 
和 PP i 0 
Ne a a i | 


色 鲜艳 的 车 ， 它 时 尚 与 
| 霸气 共存 ， 既 有 男性 的 坚 妆 ， 又 有 女性 | 


z， 画 面 中 用 来 展 志 
可 以 让 画面 内 容 更 具 条 理性 ， 信 


154 


为 容 更 具 针对 性 。 


四 色 配 色 
py a i i 
Pop a a 
ep i i i 
EB a a 
[ep tp Rg i 
Br Gp ep 
Py Py a i 
| 


FORDCARS -THEUNEUP 


Ee 5 -> i x 
EIORda 


= 


白色 是 干净 、 纯 榨 的 颜色 ， 在 该 网 | 
| 的 热情 ， 是 一 个 很 复杂 的 存在 。 所 以 网 i “ 页 中 ， 以 白色 为 主 色调 ， 将 前 景 中 的 商 | 


| 品 淋漓 尽 致 地 展现 出 来 。 


CMYK=0.0.0.0 RGB=255,255,255 


| 国 CMYK=37.87.8.0 RGB=183.60.146 
| 国 CMYK=44.98.56.2 RGB=164.34.83 
| Ml CMYK=61.12.0.0 RGB=84.190.254 


息 的 空间 也 就 越 来 越 大 , 将 页 面 垂 直 分 割 分 布 ， 


五 色 配色 
ts Ya Pi i 
AP EP EE 
sy ay Py > 
Eb 
et Pi a > 
Ebb 
a > Pay i Pa 
Eb 


恒 廊 染 咏 辣 加 号 上 后 冲 权 冯 坤 96 游 


| 
| 


奢侈 品 属于 高 档 消费 ， 代 表 的 是 一 种 高 品质 的 生活 方式 。 在 用 户 浏览 网 页 的 过 程 
中 ， 要 能 够 感受 到 从 页 面 中 传递 的 优雅 与 舒适 ， 甚 至 得 到 一 种 精神 层面 上 的 享受 。 优 
秀 的 奢侈 品 网 页 设计 还 要 在 网 页 中 体会 到 该 品牌 的 历史 底 蔓 、 文 化 传承 。 在 网 页 设计 
的 过 程 中 要 考虑 色彩 、 图 案 、 形 态 、 布 局 等 的 元 素 ， 必 须 做 到 网 页 的 功能 与 情感 相 呼 
应 ， 这 样 才能 够 显示 出 奢侈 品 的 独具匠心 和 与 众 不 同 。 


加 


司 汉 山 5 疏 


[ 汪 河 必 区 ”优雅 风格 的 奢侈 品类 网 页 设计 


优雅 风格 的 网 页 设计 给 人 的 第 一 印象 就 应 该 和 谐 : 颜色 的 和 谐 ， 构 图 的 和 谐 。 这 
通常 色彩 柔和 ， 布 局 简约 ， 用 这 种 方式 去 体现 出 别致、 优雅 和 迷人 。 
BOUCHERON 


加 讨 染 跨 辣 避 号 车 


Gobletion de Toute, oailirie 


| 设计 理念 : 网 页 中 的 内 容 非常 简单 ， 侈 画面 中 ， 柔 和 色调 加 上 简约 的 布 
| 大 幅 的 网 页 广告 占据 了 视觉 重心 ， 给 人 ; 局 ,给 人 一 种 心旷神怡 、 如 沐 春风 的 感觉 。; 
| 一 种 赏心悦目 的 感觉 。 | 人 乡 在 该 网 页 中 ,布局 虽然 简约 ,但 | 
| 色彩 点 评 : 网 页 用 高 明度 色彩 基调 ， ; 是 细节 丰富 ， 例 如 ， 金 色 渐变 的 网 页 标 | 
| 以 白色 和 灰色 作为 搭配 , 给 人 一 种 干净 、 | 志 给 人 一 种 奢华 的 感受 ， 而 手写 体 的 文 | 


| 明亮 的 感觉 ， 然 后 用 金色 作为 点 级 色 ， | 字 ， 为 画面 添加 了 浪漫 色彩 ， 在 这 一 丝 | 
| 透 着 几 分 奢华 。 | 一 扣 中 都 透露 着 细腻 。 | 
| 全 网 页 中 的 图 片 ， 利 用 光影 的 变化 ; CMSYK=30.24.20.0RGB=189.188.193 | 
| 营造 空间 感 。 让 访客 有 一 种 触手 可 及 的 | CMYK=6.5.5.0 RGB=242.242.242 


| 感觉 | EECMYK=17.12.59.0 RGB=17.12.59.0 | 


贡 否 导 半 换 东 加 日 


页 
配 
色 
设 
计 
手 
册 


RITHE COLLECTION E23 


。 在 该 网 页 
、 优 雅之 感 。 | 
左 侧 的 人 物 和 右 侧 的 商品 打造 出 -|! 


种 平和 感 。 | 


CMYR=3.18,16,0 RGB=248,222,211 
CMYK=26.17.16.0 RGB=198.,205,209 
CMYK=39.26.24.0 RGB=170.180.184 


该 网 页 以 大 医 
| 网 页 后 ， 就 会 被 画 面 中 的 模特 吸引 。 

目 图 形 中 利用 人 物 的 位 置 去 制作 空 
| 关系 ， 有 很 强 的 代 人 感 。 

| CMYK=20.11.12.0 RGB=212,220,222 

| 国 CMYK=73.47.40.0 RGB=85,124.140 

| 图 CMYK=47.49.64.0 RGB=156.134.100 

| CMYK=82.81.71.54 RGB=41.36.42 


中 ， 青 灰色 


S62 格 的 奢侈 品类 网 页 


神秘 风格 通常 自信 、 优 雅 ， 犹 如 黑夜 中 璀璨 的 星光 ， 让 人 觉得 闪 炮 、 精 致 、 振 奋 。 
神秘 风格 通常 


用 低 明 度 的 色彩 基调 ， 然 后 用 高 明 | 度 色彩 作 为 点 级 色 ， 形 成 一 种 颜色 
的 


Cordier 


4 不 可 抗拒 的 魅力 。 | 
傅 页 面 中 ,文字 位 于 左 侧 ， 商 品位 于 | 
i 侧 。 这 种 对 称 的 形式 达到 | 了 平衡 的 效果 。 | 


单 ， 标 题 正文 型 的 布局 方式 可 让 
[ 观 地 了 解 商品 。 


开 


: 色彩 点 评 : 该 网 页 为 低 明 度 色彩 基 例 在 该 网 页 中 ， 深 红色 代表 着 小 女 | 
| 调 ,以 黑色 为 主 色调 , 以 深 红色 为 点 级 ， ; 人 的 细腻 和 浪漫 。 | 
; 整体 给 人 一 种 神秘 、 性 感 的 视觉 感受 。 I CMYK=68.97.96.67 RGB=51.1.0 

| 独 在 虹 色 背景 的 守 托 下 ， 项 链 闪 滩 “ 革 时 是 嘎嘎 CMYK=100.100.100.100 RGB-0.0.0 : 
| 着 清冷 的 光芒 ， 让 本 来 寂静 的 页 面 散 % ES | 


色彩 基调 ， 色 萨 
调 给 人 一 种 幽静 、 静 谥 的 感觉 。 前 | 
4 中， 精致 的 商品 在 绿色 的 衬托 下 ， | 


得 格外 雅致 。 | 


CMYK=16.11.18.0 RGB=223.224.212 
CMYR=18.15,10,0 RGB=216,215,222 

CMYK=76.59.100.30 RGB=66.81,39 
CMYRK=87.75.98,68 RGB=15,27,5 | 


该 网 页 以 深 灰色 为 主 色调 ， 利 用 曾 
| 色 的 变化 ， 让 商品 更 加 突出 。 在 深 灰色 
| 背景 衬托 下 ， 金 色 的 商品 显得 格外 华丽 。 


| CMYK=14,32,43,0 RGB=228.186.147 
| 国 CMYK=72.65.62.17 RGB=85.85.85 
| 转 CMYK=87.82.82.71 RGB=18.18.18 


网 页 设计 的 流行 趋势 一 一 滑 出 式 菜单 


滑 出 式 菜单 可 以 从 屏幕 的 顶部 或 侧面 以 无 颖 的 切换 方式 呈现 网 站 内 容 的 其 余部 分 ， 
是 一 种 省 时 、 便 利 的 设计 ， 它 简单 、 实 用 ， 是 未 来 的 发 展 趋势 。 
国 necnosrtv stone 


区 


一 雍 染 蕊 滞 习 号 车 闪避 半 册 S 汕 


ARMANLea 


Bi EO 旭 


CO 


艺术 设计 类 的 网 页 设计 要 更 加 注重 艺术 效果 的 表达 ， 页 面 设计 的 好 坏 决 定 着 人 们 
使 用 的 愉悦 性 和 满意 度 。 而 且 能 够 去 浏览 艺术 类 网 站 的 访客 多 数 都 有 一 定 的 艺术 涵养 ， 
所 以 网 页 首先 就 应 该 是 一 件 艺术 品 ， 这 样 才能 让 网 站 中 的 内 容 更 加 具有 说 服 力 。 


Hit whacdl 


[PE 


We're proud of our work 


翰 9 潞 


5.7.1 插画 风格 的 艺术 设计 类 网 页 设计 


插画 风格 的 网 页 是 指 以 手绘 插画 为 主要 视觉 元 素 的 网 页 设计 。 插 画 主要 的 作用 是 


型 汶 染 中 辣 避 号 车 他 可 剂 


| 
| 


(的 视觉 感受 。 


| 利用 了 网 页 的 空间 ， 给 人 一 种 舒展 、 开 | 例 网 页 中 的 矢量 插画 色调 统一 、 画 | 


| 阔 的 视觉 体验 。 | 风 统一 ， 总 体 上 给 人 一 种 和 谐 之 美 。 | 
| ”色彩 点 评 : 在 该 网 页 中 颜色 十 分 丰 | ”全 在 网 页 中 图 形 元 素 较 多 ， 更 容易 | 
| 富 , 所 以 采用 了 白色 作为 导航 栏 的 颜色 ， | 吸引 访客 的 注意 。 | 
| 这 样 可 以 提 亮 画面 整体 的 色彩 ， 也 可 以 | 硬是 时 时 CMYK=89.61.1.0 RGB-0.99.,186. 

| 增加 视觉 的 稳定 性 。 | TCMYK=-0.89.95.0 RGB=255.53.0. : 
| 俐 该 网 页 的 视觉 冲击 | EE CMY k=100.100.100.100 RGB-0.0.0 | 
| 网 页 中 的 插画 采用 了 青 营 | ES CMYK 100.100.57.24 RGB=21,27,78 | 


| 配 ， 这 两 种 颜 


在 该 网 页 中 ， 夸 张 的 艺术 形象 给 人 |; 
; 一 种 另类 、 个 性 的 视觉 印象 。 | 


| ~ CMYK=5.7.53.0 RGB=255.239.142 
! 国 CMYK=8.94.4.0 RGB=236.0.140 
| CMYK=0.0.0.0 RGB=255.255.255 


: ; CMYK=31.4.24.0 RGB=190.222.206 | 一 


击 要 淋 闻 遍 荡 轴 四 : 


画 进 行 组 合 展示 ， 让 访客 目 不 服 接 ， 
牢 牢 地 吸引 住 访客 的 目光 。 


国 CMYK=63.5,35.0 RGB=88.193.186 
国 CMYK=62.74.81.36 RGB=93.61.47 
国 CMYK=31.38.83.0 RGB=196.163.64 
园 CMYK=5.74.69.0 RGB=241.100.70 


[下放 屋 臣 ”。 拼 贴 风格 的 艺术 设计 类 网 页 设计 


在 网 页 中 将 图 片 有 意识 地 拼接 在 一 起 进行 展示 ， 这 就 是 拼 贴 风格 。 这 种 布局 风格 
通常 可 以 在 有 限 的 空间 内 表现 更 多 的 信息 。 整 齐 的 拼 由 风格 网 页 简单 干净 、 条 理 清 听 ; 
拼 贴 风格 网 页 设 i 


| : 悦 案 的 大 小 是 有 所 变 ; 
| 司 的 网 页 ， 在 网 页 中 ， 将 自己 设计 的 作 ; 化 的 ， 这 种 变化 可 以 打破 拼 贴 风格 所 产 | 
| 品 通过 图 片 的 形式 表达 出 来 。 让 访客 在 ; 生 的 呆板 、 拘 束 的 感觉 。 | 
| 打开 网 页 之 后 ， 立 即 就 能 了 解 该 公司 的 ; 例 在 网 页 中 将 页 面 、 导 航 等 内 容 做 | 
| 作品 ， 给 人 一 种 非常 直 白 的 感觉 。 : 简化 处 理 ， 能 避免 网 页 中 内 容 过 多 ， 产 | 
| 色彩 点 评 :在 页 眉 中 ， 我 们 可 以 看 ; 生 杂 乱 的 视觉 印象 。 | 
i 到 具有 红色 色彩 倾向 的 图 片 ， 这 样 的 图 | 到 到 时 CMYK=19.88.84.0 RGB=214.63,48 
| 片 效 果 可 以 给 人 一 种 半 透 明 效 果 独 有 的 | CMYK=12.9.9.0 RGB=230.230.230 
| 透明 、 距 离 之 感 。 CNMYK 一 72.64.47.3 RGB=93.96.115 
! 伍 网 页 中 的 内 容 比较 多 ， 这 种 拼 贴 | CNMYK=-12.91.67.0 RGB=227.52.68 
下 加 全 面 地 展示 商品 


Ml 


种 和 谐 、 统 一 的 视觉 印象 。 


团 CMYK=38.57.72.0 RGB=178.125.81 


pes | 转 CMYK=62.70.79.27 RGB=101.74.56 


i “全 ;CMYK=39.27.24.0 RGB=169.178,184 
ef | 


| CMYK=24.15.11.0 RGB=203.210.218 
规则 的 拼 贴 效果 ， 将 每 : 


CMYK=9.7.7.0 RGB=237.237.237 


展示 ， 给 人 一 种 活泼 、 生 局 


国 CMYR=54.0,10.0 RGB=94,227,254 
转 CMYK=61.82.0.0 RGB=133.65.166 
国 CMYK=82.63.0.0 RGB=52.95.252 


在 网 页 中 添加 音效 ， 可 以 增加 访客 的 代 人 感 ， 让 网 页 不 仅 有 视觉 上 的 体验 ， 更 有 
听觉 上 的 体验 。 网 页 音效 不 仅 可 以 添加 各 种 单 击 按钮 的 声音 ， 还 可 以 添加 背景 音乐 ， 
以 烘托 网 页 中 的 气氛 。 


双色 搭配 三 色 搭配 ggq 色 搭配 


Moruba 


a / P p 
CS] 9 - 全 四 


6 , i 加 


Dragone wins 
Site of the year 


游戏 类 网 页 设计 


以 游戏 为 主题 的 网 页 设计 也 是 网 站 中 最 常见 的 网 页 类 型 ， 通 常 ， 这 类 网 页 专业 性 
较 强 , 界面 精美 , 让 访客 在 第 一 时 间 里 就 能 享受 到 视觉 感官 的 刺激 。 只 有 这 样 的 设计 ， 
才 公 让 游戏 类 网 页 有 效 提升 网 站 的 点 击 浏览 量 树立 起 良好 的 口碑 。 


EEC 


出 否 洁 字 沁 此 骨 目 . 


ONLINE the SWan Sonata 


Piay in your web browser COLLECTORSS EDITION 


LITTLE GALAXY 


Polish your space boos and prepare 
for the advencure of a fetime wich che 
game that's taken the app stores by 


toplan 
power ups asyou can along the milky vay, 


With unlimicad gameplay pos: 


5.8.1 趣味 风格 的 游戏 类 网 页 设计 


作为 游戏 主题 的 网 页 设计 ， 引 起 访客 的 兴趣 是 非常 重要 的 ， 这 类 网 页 通常 会 利用 
游戏 的 角色 、 游 戏 的 内 容 提高 整个 页 面 的 趣味 性 、 愉 悦 度 。 在 设计 此 类 网 页 时 ,设计 
师 应 该 以 其 独特 、 新 奇 、 生 动 、 有 趣 的 创作 手法 ， 使 画面 中 的 内 容 更 具 趣 味 性 。 


ey ves 外 om On OOO OO 
ei 


第 

a 

章 
| 俐 卡通 形象 在 画 全 
; 页 设计 ， 从 网 页 广告 中 就 能 了 解 到 游 x ， 与 游戏 的 主题 相 呼 | 行 
| 的 内 容 。 表 情 丰 富 的 卡通 形象 非常 巾 例 网 页 以 青色 为 主 色调 ， 一 方面 可 ; 业 
| 趣味 性 的 主题 。 以 营造 一 种 轻松 、 活 泼 的 氛围 , 另 一 方面 ， | 的 
| 色彩 点 评 : 画面 中 以 痰 青色 为 主 与 红色 的 卡通 形象 产生 颜色 的 对 比 。 网 
i 调 ， 给 人 一 种 活泼 、 激 情 的 视觉 印象 。 MN CMYK=57.0.9.0 RGB=90,218,249 页 
| 仿 文 字 与 插画 相映 成 趣 、 互 为 补充 ， CMYK=24,0,7,0 RGB=201,248,252 | 色 
| 在 传达 游戏 内 容 的 同时 ， 也 为 画面 添 力 EE CMYK=37.100.100.3 RGB=181.12.20 | 彩 
| 了 趣味 性 CMYK=38.20.96.0 RGB=182.188.24 | | 


3295ro-> 


| 繁杂 ， 所 以 采用 拼 贴 的 方式 构图 。 这 样 
| 构图 方式 让 画面 看 起 来 简洁 流畅 ， 极 富 8 
| 代 感 。 


CMYK=67.55.6.0 RGB=105.117.183 
CMYK=92.77.9.0 RGB=30.75.159 
CMYK=79.74.71.45 RGB=51.51.51 
CMTYK=8.6.6.0 RGB=239.239.239 


| 该 网 页 采用 海报 式 的 布局 方式 ， 
i 字 信 息 居中 排列 ， 条 理 清晰 。 网 页 左 
; 两 侧 的 游戏 角色 都 是 面向 中 央 位 置 ， 
| 有 引导 视觉 的 作 


CMYK=91.98.48.18 RGB=51.39.86 
CMYK=86.83.62.40 RGB=43.45.62 
CMYR=15.44.87.0 RGB=227.161.44 
CMYK=16.9.2.0 RGB=222.228.242 


班 


击 要 淋 闻 志 惑 加 目 : 


串 州 平 疯 哈 型 昼 习 


5.8.2 未 来 感 风格 的 游戏 类 网 页 设计 


网 页 中 的 未 来 感 ,通常 通过 图 形 或 色调 去 营造 氛围 ,让 画面 产生 一 种 对 未 知 的 假想 。 
未 来 感 可 以 是 神秘 、 冷 漠 的 ， 也 可 以 科技 、 诡 异 的 。 未 来 感 以 其 独特 、 新 奇 、 生 动 有 
下 的 创作 手法 ， 引 起 了 人 们 的 关注 ， 使 


Ph 背景 与 前 景 的 关系 ， 制 造 了 | 
极 强 的 空间 感 ， 这 种 空间 感 让 访客 有 一 ; 
种 身 临 其 境 的 感觉 。 | 

铂 在 低 明 度 的 衬托 下 ， 画 面 中 的 两 | 
首 青色 光线 格外 突出 。 | 
< 感 风格 可 以 给 人 一 种 新 奇 、 


感受 , 用 户 可 以 被 这 种 气氛 感染 。 ; 
给 网 页 中 看 不 清 脸 的 人 物 也 让 颖 个， 
i 面 的 气氛 更 加 凝重 。 : 


页 设计 ， 以 -个 1 器 人 作 为 背景 ， I CMYK=91.87.85.76 RGB=5.6.8 
:着 蓝光 的 眼睛 让 人 觉得 异常 诡异 ， 整 个 | 0 CMYK=77.71.51.11 RGB-79.80.100 | 
| 画面 运用 光线 、 颜 色 营 造 了 一 种 压抑 、 ;EECMYK=68.47.10.0RGB-100.130.187 : 
紧张 的 气氛 。 EE CMYK=55.78.100.31 RGB=11.61.29 | 

色彩 点 评 : 


TONIGHT WE RIDE 


该 网 页 属于 低 明 度 色彩 基调 ， 深 灰 
; 色 给 人 一 种 冷静 危险、 神秘 莫 测 的 感觉 ， 
| 郴 黄 色 作为 点 级 色 , 象征 着 危险 、 警 告 。 
; 而 且 网 页 中 按钮 非常 的 简洁 ， 利 用 这 样 
| 简洁 的 元 素 ， 更 符合 画面 整体 的 风格 。 


| 国 CMYK=36.78,88,1 RGB-182.86.50 
| 国 cMYK=70.76.81.50RGB-64.47.38 
| 国 CMYK=83.78.76.59 RGB=34.35.35 
| 国 CMYK=100.100.100.100 RGB-0.0.0 


色彩 


严肃 、 庄重 的 视 ' 觉 印 象 。 


国 CMYK=72.20.17.0 RGB=49.168.207 

口 CMYK=0.0.0.0 RGB=255.255,255 
CMYK=34.18.13,0 RGB=181.198.213 

国 CMYK=96.91.62.45 RGB=18.33.56 


随 着 时 代 的 发 展 ， 电 脑 的 屏幕 也 越 来 越 宽 ， 宽 屏 网 页 设计 也 应 运 而 生 。 宽 屏 的 网 


页 可 以 给 用 户 一 种 开阔 、 丰 满 的 用 户 体验 。 通 常 , 这 类 网 页 打开 后 是 一 个 完整 的 图 片 ， 


形式 上 大 多 采用 较为 简约 的 构图 方式 ， 整 体 上 给 人 一 种 和 舒展、 开阔 的 印象 。 这 类 网 页 
也 会 考虑 小 屏幕 的 用 户 ， 通 常 图 片 尺 寸 根 据 屏 宽大 小 自 适 应 ， 交 互 菜 单 和 文字 信息 通 
目 适 应 。 


常 默认 系统 字体 通过 大 小 变换 和 位 移 进行 房 


EE 


GALLERY 


随 着 经 济 的 发 展 ， dr ma dn 出 去 旅游 主要 是 为 了 愉悦 心情 ， 放 
松 生 和 所 以 在 旅游 类 的 网 页 设计 中 ， 都 会 搭配 非常 有 吸引 力 的 精美 照片 ， 目 的 
是 为 了 突出 视觉 吸引 力 ， 获 取 更 多 的 湾 在 a 

旅游 类 网 页 设计 可 以 遵循 以 下 几 点 。 

(1 ) 导航 清晰 ， 布 局 合理 ， 层 次 分 明 ， 让 用 户 有 一 种 简便 舒适 的 用 户 体验 

(2 ) 主题 突出 ， 风 格 统一 。 作 为 旅游 类 的 网 页 设计 ， 旅 游 项 目 就 如 同 商品 一 般 ， 
需要 推销 出 去 。 et st nie te ssp een tee 

(3 ) 界面 清 副 。 要 想 留 住 访客 ， 就 不 要 让 画面 太 过 压抑 。 例 如 ， 多 的 网 
计生 他 反 自 到 作为 汪 要 六 色 ， 前卫 坟 :向 有 之 辣 芭 允 比 吕 有 。 这 样 ， 访 问 者 
浏览 时 ， 眼 睛 才 不 会 疲劳 。 

) 色彩 和 谐 。 在 网 页 设计 中 ， 根 据 和 谐 、 均 衡 和 重 

彩 进 行 组 合 、 若 配 ， 来 构成 美观 的 页 面 。 


的 原则 ， 将 不 同 的 色 


Si 民族 风格 的 旅游 类 网 页 设计 


民族 风格 是 一 个 民族 在 长 期 发 展 中 形成 的 区 别 于 其 他 民族 的 独特 的 审美 风貌 和 艺 
术 特 征 。 通 常 ， 这 类 网 站 可 以 展现 民族 的 精神 、 心 理 、 气 质 、 性 格 ， 揭 示 本 民族 历史 
bs ba EE 思维 模式 及 审美 观 / 


”设计 理念 ， 该 网 页 采用 民族 风格 的 设 | 让 整个 画面 变 得 灵动 起 来 。 


| 计 方式 ， 通 过 画面 中 的 各 种 细节 ， 能 够 让 | 。 例 网 页 中 ， 插 图 、 少 景 都 采用 了 民 | 


| 访客 感受 到 页 面 所 表达 的 文化 底 荀 。 | 族 元 素 ， 紧 扣 旅 游 站 的 主题。 
| 。 色彩 点 评 : 因为 网 页 为 民族 风格 ，| 。 侠 在 灰色 的 衬托 下 ， 深 明 啡 色 的 导 ， 


i 所 以 在 颜色 的 选择 上 ， 要 与 整体 风格 相 | 航 栏 非常 抢眼 。 

i 统一 。 灰 色调 的 配色 方案 给 人 一 种 证 | EN CMYK=71.73.93.52 RGB=60.47.27 
i 暴 、 朴 素 的 美感 。 | CMYK=8.6.6.0 RGB=239.239.239 

: .的 灰 色调 和 容易 带 给 人 一 种 呆板 、 CMYK=8.63.9.0 RGB=237.128.172 
EE CMYK=3.,56.91.0 RGB=247.143.18 


在 该 网 页 中 ， 金 色 的 背景 搭配 浅 卡 | 
其 色 的 前 景 ， 给 人 一 种 历史 悠久 的 感 
的 内 容 相 统一 。 


| 该 网 页 为 中 明度 色彩 基调 ， 灰 色调 
| 的 配色 给 人 一 种 中 庸 、 优 雅 的 古典 美 。 


| 这 与 网 页 中 古色 十 香 的 风景 图 片 相 呼应 。 


国 CMYK=44.95.91.11 RGB=156.44.44 
转 CMYK=78.72.69.39 RGB=58.58.58 
| CMYK=14.18.35.0 RGB=228,212.175 
团 CMYK=35.50.93.0 RGB=186.138.42 | 


| 国 CMYK=6s.53.84.11 RGB=97.108.67 

| 转 CMYK=81.78.76.58 RGB=39.36.36 

| 国 CMYK=63.56.57.4 RGB=113.110.104 
| CMYK=19.12.18.0 RGB=216.218.209 


翰 9 句 


恒 廊 染 嘱 沿 避 号 后 章 可 半 


击 要 淋 闻 遍 荡 加 目 : 


5.9.2 轻松 风格 的 旅游 类 网 页 设计 


出 去 旅游 是 对 身心 放松 的 一 种 方式 ， 所 以 旅游 类 的 网 页 设计 可 以 将 欢乐 、 轻 松 作 
为 切入 点 进行 设计 制作 。 网 页 中 利 有 图形、 文字， 创造 一 种 让 人 向 往 的 气氛 ， 这 样 才 
能 加 深 访 客 的 心理 印象 ， 让 人 心神 向 和 


| 设计 理念 : 该 网 页 采用 海报 型 布局 方 ; 铂 倾 斜 的 文字 排版 与 画面 的 气氛 相 
| 式 ， 人 物 夸张 的 表情 给 人 一 种 紧张 、 刺 激 | 呼应 ， 给 人 一 种 活力 四 射 的 感觉 ,非常 | 
| 的 感觉 无形 中 给 访客 带 来 了 感染 力 。 ”| 具有 号 召 力 、 煽 动力 。 | 


四 


| 色彩 点 评 ， 该 网 页 以 自然 风光 为 主 | 。 锥 画 面 中 ， 向 下 俯冲 过 来 的 人 群 为 | 
| 要 内 容 ， 以 蓝 、 绿 色 为 主 色调 ， 给 人 一 | 画面 制造 了 一 种 危险 、 紧 张 的 气氛 。 

| 种 自然 、 清 新 的 视觉 印象 。 | EN CMYK=56.11.17.0 RGB=118,193,215 | 
| 例 该 网 页 利用 自然 风光 营造 一 种 空 ECMYK=-32.52.0.0 RGB-82.52.00 | 


| 间 感 ， 让 访客 有 一 种 身 临 其 境 的 感觉 。 EE CMYK=72.41.100.2 RGB=87.130.33 | 
| | EE CTYK 一 85.63.100.47 RGB=33,60.25 | 


| 在 该 网 页 中 ， 的 图 形 作为 视 
| 觉 中 心 , 让 访客 的 视野 变 得 开阔 。 同 时， 
| 在 水 中 嬉戏 的 人 物 可 以 给 访客 一 种 心 
| 理 暗示 ， 能 让 访客 感受 到 旅游 所 带 来 的 
| 放松 和 快乐。 


| 加 CMYK=27.44.45.0 RGB=199.155.133 
| 国 CMYK=81.50.100.15 RGB=54.102.5 
| 国 CMYK=88.74.73.49 RGB=28.47.48 
| 国 CMYK=96.75.57.24 RGB=0.64.84 


这 是 一 个 游乐 场 的 网 页 设计 ， 因 为 
游乐 场 针对 儿童 ， 所 以 在 颜色 的 取舍 上 | 
主要 选择 了 比较 鲜艳 、 活 泼 的 颜色 。  ! 


国 CMYK=17.87.34.0 RGB=220.62.115 
CMYK=62.17.3.0 RGB=92.181.234 
CMYK=6.26.51.0 RGB=247.204.136 
国 CMYK=24.93.85.0 RGB=206.48.48 
| 加 CMYK=45.52.0.0 RGB=161.133.201 


网 页 设计 的 流行 趋势 一 视频 背景 二 
视频 背景 通常 会 应 用 在 网 站 的 首页 ， 它 与 大 图 背景 的 视觉 效果 相差 无 几 ， 但 由 于 

是 动态 的 ， 所 以 表现 力 更 强 一 些 。 视 频 背 景 能 够 让 网 站 脱颖而出 ， 让 访客 以 前 所 未 有 

的 方式 记 住 你 的 品牌 


a 

章 

不 

同 

. . . . 行 
Digital solutions led by clarity, 业 
simplicity & honesty 交 
色 

彩 

拱 

配 


三 色 搭配 四 色 搭配 


全 全 全 全 全 全 全 全 全 全 全 从 全 全 全 全 
全 全 全 全 全 全 全 全 全 全 从 从 从 全 全 全 
全 全 全 全 全 全 全 全 全 全 全 从 从 从 从 从 


时 全 F7| 9st 


OI R: 


击 避 淋 李 遍 惑 轴 目 . 


网 
页 
配 
色 
设 
计 
手 
册 


家 居 包 含 的 类 别 非 常 广泛 ， 家 庭 装修 、 家 具 配 置 、 家 电 等 一 系列 与 居室 有 关 的 内 
容 都 属于 家 居 范 畴 。 既 然 与 “家 ”有 关 , 那么 ,家居 类 的 网 站 设计 应 该 注意 以 下 几 点 。 


@ 主题 鲜明 


能 让 访客 在 第 一 时 间 内 就 了 解 网 站 的 主要 诉求 。 


Cy 内 容 整 体 


在 网 页 的 设计 中 ， 要 做 到 布局 合理 化 、 有 序 化 、 整 体 化 。 利 用 统一 的 视觉 符号 ， 
为 整个 网 站 营造 一 种 和 谐 、 融 治之 美 。 


@> 布局 精巧 


在 网 页 中 ,可 以 利用 精巧 的 布局 ， 去 表达 语言 无 法 表达 的 一 些 思想 和 诉求 ， 做 到 
丰富 多 样 。 


5. 


10.1 温 芯 风 格 的 家 居 类 网 页 设计 


温馨 风格 可 以 利用 画面 中 的 颜色 与 布 


局 的 结合 ， 以 其 独特 的 视觉 语言 ， 与 访客 进 


行 思想 情感 的 交流 。 通 常 ,温馨 风格 为 暖色 调 ， 颜 色 明度 较 高 ,整体 上 给 人 一 种 温馨 、 


| 调 ， 


面 的 左上 角 。 右 侧 的 帅气 的 代言 人 与 


色彩 点 评 : 该 网 页 为 高 明度 色彩 
以 白色 、 亮 灰色 为 主 色 调 ， 以 青 1 


i 和 


深 灰 为 点 缀 色 。 整 体 上 给 人 一 种 温 


| 而 又 活泼 的 感觉。 


| 产生 了 一 种 微妙 的 平衡 ， 它 既 稳重 ， 


乡 深 灰色 的 导航 栏 让 整个 画面 颜 


| 流 计 理念 : 该 网 页 为 海报 型 的 布局 方 | 不 会 时 宾 夺 主 。 ”| 
| 式 ， 根 据 人 的 阅读 习惯 ， 将 标题 放置 在 
| 画 

| 品 紧 千 在 一 起 ， 让 商品 更 加 有 可 信 度 。 


全 画面 左 侧 的 一 组 四 格 图 案 像 漫画 | 


面 中 ， 青 色 的 纯度 较 低 ， 与 ; 
9 色彩 相 和 谐 。 | 
CMYK=29.22.20,0 RGB=192.193.195 | 

CMYK=17.5.9.0RGB=220.233.234 | 
和 CMYK=57.0.24.0 RGB=103.213.216 | 
EE CMvk 82.77.73.54RGB-39.40.42 


翰 9 潞 


融 雍 染 蕊 喇 习 号 上 持 冲 可 刘 


| 该 网 页 为 家 居 用 品 的 网 页 设计 , 干 在 该 网 页 中 ,以 整 张大 图 作为 背景 ， 

| 兆 、 利 落 的 配色 能 够 更 加 突出 商品 的 品 | | 这 样 的 设计 可 以 给 人 一 种 扩展 、 延 伸 的 视 | 
| | 质 。 拼 贴 风格 的 页 面 设计 ， 既 表现 了 商 | 觉 感 受 。 网 页 以 家 居 空 间作 为 视觉 主体 ， | 
| 品 的 主题 ， 又 表现 了 商品 的 细节 。 | “| 深 橘 黄色 调 给 人 一 种 温馨 、 舒 适 的 感觉 。 | 


出 召 富 半 区 壤 曙 内 


| CMYR=7,5,7,0 RGB=240,240,238 | | 国 CMYK=67.73.75.36 RGB=83.62.54 

: CMYK=35,35,50,0 RGB=181.165.132 : | 国 CMYK=31.64.90.0 RGB=192.114.47 
fe 
| 加 CMYK=34.46.50.0 RGB=185.147.124 


简单 、 大 方 即 为 素 , 优质 、 高 调 即 为 雅 。 素 雅 风格 的 网 页 设计 通常 颜色 都 比较 淡 ， 
颜色 明度 都 较 高 ， 这 样 容 易 营 造 出 一 种 氛围 、 一 种 状态 。 这 种 风格 会 延伸 出 一 种 淡定 
里 的 高 雅 情调 ， 表 现 了 高 尚 的 生活 情操 。 


BS = es 
| i 俐 网 页 中 的 图 片 都 以 高 亮度 的 灰色 i 
丘 FT . 本 fy, 营造 了 一 种 视 党 上 的 统一 感 
1 


| | 例 在 画面 中 ， 清新 的 配色 更 能 凸显 ， 
| 一 es 可 品质。 
| | 人 @ 拼 贴 风格 的 网 页 布局 方式 ， 可 以 | 


| 上 充分 地 利用 有 限 的 网 页 资源 ， 让 网 站 售 
| 设计 理念 ， 该 网 页 来 自家 居 网 站 ， ; 卖 的 商品 更 全 面 地 进行 展示 。 | 


| 将 商品 以 拼 贴 的 方式 进行 摆 放 ， 构 图 非 ; CMYK=4.3.2.0 RGB=247.247.249 
; 常 简约 。 : CMYK=10.8.5.0RGB=234.234.239 
| 色彩 点 评 :该 网 页 为 高 明度 色彩 基 | : EN CMYK=54.63.82.11 RGB-133.99.63 | 
白色 的 eae : CMYyk=19.28.46.0 RGB-217.189.144 | 


| 调 


托 下 ， 商 品 显得 非常 突出 。 


CMYK=9.7.7.0 RGB=237.237.237 


CMYK=5.4.4.0 RGB=244.244.244 
CMYK=0.0.0.0 RGB=255.255.255 


i: A : CMYK=29.12.15.0 RGB=194.212.216 : 
而 采用 高 1 ! 
: | : 整 人 en ee | CMYK=18.3.20.0 RGB=219.234.216 : 


| ne La . 二 | 在 给 人 一 种 特别 的 视觉 感受 同时 ， 又 能 | 
| 更 好 地 展示 商品 。 该 网 页 以 高 明度 的 亮 | 
| 灰色 搭配 上 红色 , 颜色 素雅 中 透 着 活泼 。 .| 


: 转 CMYK= 75.53.100.17 RGB=76.99.43 
: CMYR=22.54,2.0 RGB=210.141.191 
图 | CMYK=26.99.87.0 RGB=202.20.45 


: CMYR=7,5,5,0 RGB=240,240,240 


上 E 片 式 设计 可 以 将 网 页 模块 化 ， 像 卡片 拼 贴 在 一 起 。 卡 片 式 设计 使 得 在 浏览 器 中 
能 浏览 大 量 数据 。 通 常 ， 卡 片 式 设 计 中 的 每 一 张 “ 卡 片 ” 必 须 具有 功能 性 、 独 立 性 ， 
并 且 有 可 翻动 性 ( 用 户 可 以 点 击 ,查看 更 多 详细 内 容 ) 。 总 之 ,卡片 设计 干净 、 简 单 ， 
具备 多 功能 性 。 


FP 
4 
EE 


10.1-10.26 


5 购物 类 网 页 设计 


购物 类 网 站 的 中 心 词 就 是 购物 ， 它 不 同 于 一 般 网 站 ， 它 既 要 遵循 一 般 网 站 的 设 
计 原 则 ， 又 要 通过 建立 良好 的 交互 体验 ， 去 把 握 消费 者 的 消费 心理 ， 让 访客 在 网 上 
购物 时 能 够 有 便捷 、 舒 适 的 购物 体验 ， 从 而 对 产品 、 服 务 产生 信赖 ， 以 达到 促进 用 
户 在 网 上 购物 的 目的 。 购 物 类 网 站 中 的 产品 要 有 秩序 、 科 学 化 地 分 类 ， 便 于 购买 者 
查询 。 网 页 整体 的 布局 不 仅 要 具有 美观 性 ， 还 需 具 有 引导 性 ， 这 样 才能 吸引 大 批 的 
购买 者 。 


Gmarker [-- 本 只 we 遇 


Smoarket Global 


GOES 
MOBILE 


Start Smart Shopping 


5.11.1 时 尚 风格 的 购物 类 网 页 设计 


时 尚 风 格 就 是 利用 当下 最 流行 的 元 素 、 色 彩 、 布 局 方式 ， 去 打造 一 个 标新立异 、 
与 众 不 同 的 网 页 设计 ， 它 能 够 给 人 一 种 别开生面 、 焕 然 一 新 的 感觉 。 


NEW ARRIVALS WOMEN 


| ”设计 理 网 页 中 ， 
i 分 为 二 ， 左 侧 以 图 片 的 形式 介 
| 右 侧 则 以 文字 作为 说 明 ， 
i 既 有 对 称 的 严谨 之 美 , 又 不 会 过 于 死板 。 
| 色彩 点 评 : 


将 画面 
站 绍 商品 ， 


| 彩 基调 ， 的 配色 给 人 一 种 神秘 、 
| 深 丛 的 必 ， 这 也 暗示 着 商品 的 品 | 
质 与 特点 。 
鲍 网 页 采用 单 色调 的 配色 方案 ， 相 
昌 不 同 的 ; 合理 地 安排 颜色 的 明度 


这 种 构图 方式 


该 网 页 采用 低 明度 的 色 | 
| 能 够 有 呼吸 的 空间 ， 


| CMYK=97.91.58.38 RGB= 


EpromM ~ sEARcHa 


Force of Nature 


THE NORTH FAC 


OUR XO COLLABORATION WITH THE 


芭 化 ， 这 也 是 该 网 页 配色 的 巧妙 之 处 。 
| 

了 视觉 上 的 平衡 。 | 
和 可 盏 中 的 国 白 空间 很 

访客 的 视觉 空间 ， 让 文字 、 


从 而 优化 上 用 -体验 | 
EE CMYK=100.100.100.100 RGB=0.0.0 | 


| CMYK=88.71.73.4 RGB=48,82.116 


| 四 CMYK=140.179.218 RGB: 


GIAMGLOW 


| 型 。 灰 色调 的 配色 大 气 而 又 优 牙 ,简约 


色 ， 在 该 


网 页 中 ， 利 用 黑色 营造 了 时 尚 、 神 秘 、 


| 的 布局 方式 让 访客 一 目 了 然 ， 有 非常 
| 好 的 用 户 体验 .青色 的 按钮 在 这 样 中 庸 、 
| 柔和 的 色彩 氛围 中 显得 活跃 ， 虽 然 面积 
| 较 小 ， 但 效果 极 佳 。 


! 加 CMYK=63.20.21.0 RGB=99.174.199 
: 转 CMYK=85.81.80.68 RGB=23.23.23 
: CMYK=0.0.0.0 RGB=255,255.255 


高 贵 的 气氛 。 在 这 样 的 气氛 中 ， 模 特 ; 
鞠 的 目光 似乎 有 着 魔力 ,让 人 过 目 难 


转 CMYK=47.98.90.18 RGB=142.34.42 
加 CMYK=31.52.51.0 RGB=191.138.118 

CMYK=24.40.37.0 RGB=205.166.152 
转 CMYK=100.100.100.100 RGB=0.0.0 


山 5 癌 


副 闭 六 区 同 司 否 层 村 可 习 


5.11.2 


设计 理念 :该 网 页 采用 海报 型 的 布 


| 心 。 手 写 体 的 标题 同时 也 营造 了 轻松 、 
| 活泼 的 氛围 。 
| 色彩 点 评 : 


| 色 ， 这 样 的 搭配 不 仅 与 商品 的 性 质 想 呼 


| 应 ， 还 让 整个 画面 颜色 更 加 丰富 多 彩 ， 
; 让 网 站 的 主题 更 加 明确 。 | 
| 伍 在 画面 中 的 模糊 背景 给 人 一 种 腻 | 
; 肛 的 感觉 而且 


它 使 前 


| 届 色 为 经 典 的 配色 之 一 ， 它 
| 利用 颜色 的 明暗 对 称 让 画面 产生 一 种 
| 不 可 抗拒 的 视觉 冲击 力 。 在 高 明度 的 衬 
| 托 下， 彩色 的 服装 变 得 格外 显眼 。 


| 国 CMYK=34.98.99.1 RGB-1863536 
| 国 cMYK=94.8g.45.12 RGB-37.55.98 
| 国 CMYK=1oo0.loo0.1oo.10oRGB=o.00 
| CMYK=13.11,7.0 RGB=228.227.232 


| 局 方式 ， 代 言 人 年 轻 靓 丽 的 形象 深入 人 | 


泼 风格 的 购物 类 网 页 设计 
活 小 风格 主要 是 应 用 于 年 轻 的 消 并 群体 ， 通 常 ， 


这 类 风格 会 采用 高 纯度 、 高 明度 


全 六 网 站 的 主要 诉求 对 象 为 年 径 女 


| 性 ， 所 以 ， 用 粉色 作为 主 色调 是 再 合 
| 不 过 的 选择 了 

| 该 网 页 以 粉色 作为 主体 | 
| 颜色 ， 利 用 同色 系 粉 色 及 橘 色 作为 点 缀 ; 


俐 网 页 的 布局 非常 简单 ， 能 够 让 用 | 
户 在 最 短 的 时 间 内 找到 需要 的 内 容 , 在 | 


; 很 大 程度 上 提高 了 用 户 体验 。 
| I CMYK=0,53,13,0 RGB=255,154,179 
| EE CMYK=83.79.77.61 RGB=33.32.32 


OU CMYK=0.78.86.0 RGB=255,89,31 


| EE ,82,51, =255,78,92 
与 背景 拉 开 了 | CMYK=0.82.51.0 RGB=2 8,9 


该 网 页 为 拼 贴 型 ， 高 明度 的 1 : 
给 人 一 种 恬静 、 痰 雅 的 感觉 。 在 画面 | 
+ 高 明度 的 图 片 与 白色 的 模块 有 规律 : 

变化 着 , 给 人 一 种 有 秩序 的 形式 美感 。| 


CMYK=4.27.89.0 RGB=255.200.0 
团 CMYK=15.94.89.0 RGB=223.41.37 
转 CMYK=40.67.77.1 RGB=172.105.70 
CMYK=0.0.0.0 RGB=255.255.255 
CMYK=11.8.11.0 RGB=233.232.227 


扁平 化 的 设计 是 去 掉 传 统 的 透视 、 纹 理 、 
要 的 信息 ， 让 “信息 ”本 身 奸 


渐变 、 三 维 等 效果 


， 只 强调 设计 


最 重 
新 作为 核心 被 凸显 出 来 。 如 今 扁 平 化 备 受 设计 师 的 青睐 ， 
因为 这 种 风格 可 以 让 设计 变 得 更 有 时 代 感 。 
<lab21/> 


四 色 搭 配 
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GET 15% OFF 


教育 类 的 网 站 要 向 访客 传递 一 种 优质 、 可 信 的 感觉 ， 这 样 才能 提 


信任 程度 。 对 于 教育 类 的 网 站 设计 ， 以 青色 、 蓝 色 、 红 色 作为 主 色调 
几 种 颜色 给 人 一 种 安全 、 理 性 、 值 得 信赖 的 心理 感受 。 对 于 网 页 的 布 


“ 国 ” 字 型 、 拐 角 


高 访客 对 网 站 的 


的 居多 ， 因 为 这 


能 够 让 访客 感觉 型 


世 


合 网 站 的 主题 。 


网 站 对 教育 的 一 种 认真 、 严 谨 的 态度 。 当 然 ， 网 站 


网 站 的 主题 而 设 定 ， 例 如 对 少年 儿童 、 艺 术 类 专业 等 ， 就 可 采用 创新 


型 或 “ 口 ” 字 型 的 布局 ， 因 为 这 几 种 布局 方式 最 常见 ， 也 最 实用 


局 ， 大 多 会 选择 


的 类 型 也 是 根据 
的 设计 方式 去 迎 


5.12.1 


创新 风格 的 网 页 设计 通常 推陈出新 、 
受 ， 从 而 留 下 深刻 的 印象 。 这 类 网 页 在 布 


创新 风格 的 教育 类 网 页 设计 


另辟蹊径 ， 给 人 一 种 新 奇 、 另 类 的 视觉 感 


局 上 通常 会 不 拘 一 格 ， 打 破 常 规 ， 在 颜色 的 


选择 上 ， 会 以 纯色 或 多 种 颜色 搭配 作为 配色 方案 。 创 新 风格 的 教育 类 网 页 设计 通常 应 


在 艺术 类 、 儿 童 类 等 行业 中 


AN INNOVATIVE 
GRADUATE SCHOOL 
"OF THEOLOGY 


| 倾斜 的 线条 给 人 一 种 不 稳定 的 感觉 。 
| 是 整体 的 表格 设计 比较 规范 ， 让 人 觉 
| 页 面条 理 清晰 ， 内 容 充 实 。 

| 色彩 点 评 : 该 网 页 色彩 非常 与 众 
| 同 ， 它 以 白色 为 主 色调 ， 然 后 以 黑色 人 
| 为 辅助 色 , 黑 与 白 的 搭配 给 人 一 种 清爽、 
| 利落 的 感觉 。 在 导航 栏 中 以 多 种 颜色 1 
i 为 点 缀 色 ， 极 大 地 丰富 了 画面 的 色彩 ， 
i 让 整个 页 面 变 得 灵动 、 热 闹 。 

| ”全 在 该 页 面 中 ,非常 注重 版 式 设计 ， 
| 文字 位 于 画面 的 左 侧 ， 符 合 人 们 的 阅 训 


| 打开 该 网 页 ， 视 野 非常 宽阔 ， 它 3 
; 分 地 利用 了 网 页 的 宽度 。 而 且 


页 中 ， 倾 斜 的 分 割 线 下 方 有 | 
透明 的 图 形 装饰 , 让 画面 更 有 层次 感 。 | 
全 在 网 页 中 ， 每 一 个 模块 用 一 种 颜 | 
进行 代表 ， 这 样 的 设计 更 容易 让 访客 ; 
识别 信息 。 | 
和 CMYk=40.14.8.0 RGB=166.201.226 | 
EE CMYK=0.87.71. 0RGB=250.61.61 | 
EE CMYK=44.100.23.0 RGB=169.0.119 | 
EE CMYK=78.100.42.2 RGB=100.0.107 | 
EE CMYK=93.81.16.0 RGB=39.68.145 
EU CMYK=73.12.19.0 RGB=0.179.212 


5 视觉 中 心 ， 更 容易 引起 访客 的 注意 。 | 
个 页 面 的 内 容 并 不 复杂 ， 非 常 易 于 访 | 
使 用 。 | 


CMYK=43.64.13.0 RGB=167.112.164 
CMYR=48.100.93.22 RGB=136.16.36 
CMTYK=87.83.82.72 RGB=17.17.17 
CMYK=79.59.100.32 RGB=S7.78.8 


需 9 溃 


副 闭 小 苞 司 司 否 羽 村 可 局 


东 豆 后生 区 圳 蜂 司 - 


方式 就 给 人 一 种 非 同 凡响 的 感觉 ， 通 过 
网 页 ， 我 们 能 感受 到 浓厚 的 艺术 氛围 ， 
以 及 不 同 寻常 的 思维 方式 。 


国 CMYK=28.97.93.0 RGB=199.33.39 
国 CMYK=42.93.100.9 RGB=162.47.28 
口 CMYK=0.0.0.0 RGB=255.255,255 

国 CMYK=82.78.76.58 RGB=36.36.36 


的 网 站 ， 网 站 本 身 通 过 配色 


5.12.2 严肃 风格 的 教育 类 网 页 设计 


严肃 风格 的 教育 类 网 页 设计 可 以 让 人 感受 到 一 种 严谨 、 认 真 的 态度 ， 这 样 才能 更 
容易 得 到 他 人 的 信赖。 严肃 风格 的 网 站 通常 会 给 人 一 种 简约 、 大 气 、 内 容 丰 富 但 不 繁 


智慧 、 理 性 、 认 真 、 洲 | 
i ” 俐 该 网 页 的 布置 非常 简洁 ， 直 线 型 : 
| 的 外 观 给 人 一 种 认真 、 正 直 的 感觉 。 

该 网 站 为 单 色调 配色 方案 ， 这 样 | 
会 以 同色 系 的 颜色 为 主 色调 , 根 | 
J 明度、 纯度 去 进行 变化 ， 从 而 | 
一 种 颜色 和 谐 统一 ， 又 不 缺乏 变 : 


Ce | 俐 画面 中 有 几 处 红色 的 图 标 ， 和 卡 | 

设计 理念 : 该 网 页 为 “ 国 ” 字 型 的 ; 其 黄 的 按钮 ， 设 置 这 样 的 颜色 是 因为 它 | 

布局 ， 这 种 布局 类 型 较为 常见 ,所 | 与 蓝 色 成 为 对 比 色 ， 使 画面 效果 更 加 具 | 

头 对 于 访客 来 说 ， 使 用 起 来 非常 得 心 应 ; 有 冲击 力 。 | 

=。 另 外 ， 这 种 布局 方式 页 面 可 以 容纳 | ECMYK=-100.88.31.0RGB-0.57.127 

恨 多 内 容 ， 信 息 量 大 。 | EE CMYK=68.42.5.0 RGB=93.139.202 
色彩 点 评 : 该 网 页 以 蓝 色 作为 主 色 | NN CMYk=68.42.5,.0 RGB=93.,139,202 

， 蓝 色 应 用 在 教育 类 行业 中 ， 象 征 着 : EE CMYK=17.96.100.0 RGB=219.32.1 


该 网 页 采用 灰色 调 的 配色 方案 ， 这 | 
| 种 色调 在 平静 的 空间 中 缔造 出 深沉 的 高 
贵 风情 ， 跳 脱 了 艳 俗 的 尘埃 之 气 。 


Get immediate, actionable H 
data on student mastery | 


| 国 CMYK=72.0.60.0 RGB=8.192.138 
| 国 CMYK=60.51.50.1 RGB=122.122.120 
CMSYK=10.8.8.0RGB=233.233,233 


Edulostic ED 


得 格外 抢眼 。 而 且 黄 色 与 紫色 为 对 比 色 ， 
以 黄色 作为 标题 文字 ， 让 整个 画面 效 呈 
| 充满 活力 、 生 气 勃 勃 。 


; MM CMYK=5.22.89.0RGB=255.21.0 

; 国 cMYK=95.100.44.1 RGB=53.19.117 
CMYK=8,6,6.0 RGB=238.238.238 
CMYK=0,0.0,0 RGB=255,255,255 


借 


视差 深 动 最 大 的 特点 在 于 它 的 视觉 效果 ， 采 用 视差 深 动 的 网 页 会 采用 多 层 背 景 ， 


并 让 其 以 不 同 的 速度 进行 移动 ， 形 成 网 页 内 元 素 层次 错落 的 错觉 。 视 差 深 动 效果 已 被 


越 来 越 多 的 网 站 应 用 ， 是 一 种 大 的 流行 趋势 。 在 下 图 中 ， 文 字 与 模特 同时 向 左 移动 ， 
文字 的 运动 速度 更 快 一 些 ， 这 就 形成 了 视差 深 动 。 


四 色 搭配 


击 否 淋 手 疯 荡 骨 目 . 


页 
配 
色 
设 
计 
手 
册 


医疗 类 网 页 设计 


医院 是 以 提供 医疗 护理 服务 为 主要 目的 的 医疗 机 构 ， 通 过 网 站 ， 可 以 让 访客 觉得 


医院 的 医生 妙手 仁 心 、 设 备 领 先 、 管 理 一 流 ， 这 样 才能 给 人 一 种 值得 信赖 的 感觉 ， 从 
而 达到 吸引 患者 的 目的 。 通 常 ， 医 疗 类 的 网 站 都 简洁 、 利 落 ， 以 蓝 色 、 青 色 为 主 色调 
的 居多 。 以 下 为 医疗 类 网 页 的 设计 原则 。 


© 宣传 性 
天 


医疗 类 的 网 页 要 对 医院 的 实力 及 亮点 进行 充分 展示 ， 塑 造 医院 的 良好 形象 。 


@ fst 


网 页 中 应 该 提供 尽 可 能 多 的 服务 项 目 ， 例 如 咨询 、 挂 号 等 功能 。 


3 


网 页 中 所 提供 的 各 项 信息 、 服 务 等 内 容 要 做 到 充实 而 实用 。 


@ Mt 


在 网 页 内 容 的 设计 上 ， 应 该 以 人 为 本 ， 提 高 访客 的 用 户 体 验 。 这 些 人 性 化 的 设计 
主要 体现 于 网 站 中 的 引导 性 文字 语言 、 图 形 语言 、 个 性 化 互动 等 方式 。 


@ nt 


良好 的 视觉 效果 与 强大 的 服务 功能 同等 重要 ， 可 以 突出 医院 的 文化 特色 及 定位 。 


@ 


建立 异步 沟通 系统 ， 如 帮助 中 心 、 留 言 板 、 操 作 指 南 等 ， 以 方便 浏览 者 与 医院 
间 的 沟通 ; 建立 同步 沟通 系统 ， 如 在 线 咨 询 、 电 话 反 馈 、 预 约 挂号 等 ， 以 达到 即时 双 


Bo 
HH 


向 沟通 的 目标 。 


Ot 


疗 类 的 网 页 设计 要 充分 分 析 访 客 的 心理 ， 让 访客 在 访问 网 页 的 过 程 中 体验 到 一 


种 友好 、 亲 切 的 氛围 。 
和 


5.13.1 简洁 风格 的 医疗 类 网 页 设计 


简洁 就 是 简明 扼要 , 没有 繁杂 、 多 余 的 内 容 。 这 类 风格 的 网 页 设计 通常 布局 简单 ， 
内 容 也 很 简练 ， re ge 
大 多 会 选择 比较 干净 、 亮 的 颜色 。 


SAGAWA CLINIC 


| 型 游 急 区 测 习 号 后 草本 半 协 8 溃 


XRDCRm JOF5h 


mn 
、 : a | 
: 念 : 在 该 网 页 中 ， 大 面积 傅 网 页 中 ， 孕 妇 的 形象 非常 直观 地 | 
; 留 白 减轻 了 网 页 的 负担 ， 让 信息 更 加 精 | 表达 了 网 页 的 主题 。 : 
i; 确 无 误 地 传递 。 网 页 中 右 侧 的 图 案 与 傅 在 画面 中 以 红色 作为 点 缀 色 ， 几 | 
i 字 相 结合 ， 同 样 能 够 使 信息 更 好 地 传 


红色 的 图 标 显得 非常 活泼 ， 就 像 新 生 | 
[活泼 好 动 的 性 格 一 样 。 : 
i 色彩 点 评 : 作为 一 个 妇 产科 医院 ， 依 在 画面 中 ， 孕 妇 安 详 的 面容 及 画 | 
| 孕妇 的 心态 大 多 应 该 是 平和 、 安 静 的 。 | 面 柔和 色彩 ， 可 以 给 访客 一 种 安全 、 可 | 
i 所 以 在 配色 上 ， 选 择 以 高 亮度 的 灰色 作 | 靠 的 心理 暗示 。 | 
| 为 主 色调 ， 以 白色 作为 辅 助 色 ， 两 种 CMYR=5.4.4.0 RGB=244.244.244 


: 色 的 对 比较 弱 ， 所 以 整个 画面 形成 了 EU CMYK=49.39.36.0 RGB=146.149.152 | 
: EU CMYK=0.76.67.0 RGB=253.96.71 


: 出 去 。 


网 
页 
配 
色 
设 
计 
手 
册 


”在 滩 吴 闻 网 页 中 ， 以 SK 色 作为 主 色 
| 调 ， 给 人 一 种 柔和 、 平 静 、 稳 本 
| 感觉。 大量 图 标的 运用 ， 使 画面 中 的 内 
| 更 容易 被 访客 消化 ， 提 高 了 使 用 效率 。 


| 国 CMYK=85.46.53.1 RGB=14.120.124 
| 人 CMYK=0.51.82.0 RGB=255.156.47 
| 国 CMYK=64.33.15.0 RGB=102.155.197 | 


<) 言 田 耳 县 咽 喉 科 


Er 


和 名品 巴 国 台 2 
熏 和 电信 要 这 
WE hop 


以 给 可靠、 安全、 智慧 的 感觉 。 在 | 
该 网 页 中 ， 以 白色 搭配 青色 ， 属 于 冷色 : 
调配 色 ， 整 体 上 给 人 一 种 简单 、 整 洁 的 } 
感觉 。 | 


CMYK=0,0,0,0 RGB=255,255,255 
CMYR=7.5,5,0 RGB=241,241,241 


团 CMYK=83.60.16.0 RGB=51.103.166 
CMYK=69,10,16.0 RGB=51.185.218 
CMYK=0.0.0.0 RGB=255.255,255 


5.13.2 现代 风格 的 医疗 类 网 页 设计 


现代 网 页 设计 是 一 种 新 兴 的 视觉 传达 设计 形式 ， 已 经 被 广泛 运用 。 现 代 风 格 的 网 
页 设计 无 论 在 布局 或 配色 上 ， 都 追求 时 尚 与 潮流 。 这 类 风格 的 医疗 类 网 页 设计 ， 通 常 
要 明确 网 站 的 经 营 模式 和 网 站 的 定位 。 只 有 在 网 站 的 内 容 和 形式 一 致 的 前 提 下 ， 现 代 
风格 的 医疗 类 网 页 设计 才能 够 被 人们 所 接受 0 
| pao = 8， Oo 鲍 医 院 的 科技 先进 与 否 ， 直 接 影响 | 
| : i 到 医院 的 医疗 水 平 ， 该 网 站 以 蓝 色 作为 | 
| 主 色 调 ， 能 够 给 访客 一 种 科技 先进 、 技 ; 

i 术 精 良 的 心理 暗示 。 | 
侈 网 页 中 采用 了 洋红 、 栖 色 、 湖 绿 | 
色 等 颜色 作为 点 级 色 ， 让 整个 画面 颜色 | 
变 得 丰富 起 来 。 能 够 让 访客 感受 到 温暖 。 | 
b 本 例 网 页 中 宣传 画 的 内 容 极 富 现代 感 ， 
We E 该 网 页 中 ， 以 矩形 作 | 非常 具有 说 服 力 ， 能 够 很 好 地 吸引 访客 | 
| 为 每 个 模块 的 图 形 ， 给 人 一 种 稳固 、 整 ; ，、 ~ 、、，、 六 | 
: je i | 的 注意 。 这 就 说 明 , 在 网 站 中 ， 宣传 图 、 
| 齐 的 感觉 。 画面 中 带 有 科技 感 的 宣传 图 ， ; 和 i Ee 
| 让 整个 页 面 非常 具有 现代 感 与 科技 感 | 广告 等 图 片 的 选择 是 十 分 重要 的 。 
| de i | CMYkK=90.84.62.41 RGB=32.43.61 
: 色彩 点 评 : 该 网 页 以 蓝 色 作 为 主体 | EU CMYK=75.34.0.0 RGB=0.152.255 
| 颜色 ， 并 以 青色 作为 辅助 色 ， 这 两 种 颜 | I CMYK=22.95.41.0 RGB=210.30.100 | 
| 色 在 色相 上 十 分 相近 ， 所 以 给 人 一 种 统 | 0 CMYK-0.46.71.0 RGB-255.166.77 | 
| 一 、 协 调 的 感觉 。 : EE CMYK=72.0.59.0 RGB=0.191.140 


| , How can we hetp you? 
ight bulb maments \ 
iple 


i ”打开 网 页 后 ， 首 先 看 到 的 就 是 一 幅 
i 十 分 吸引 人 眼球 的 宣传 图 (海报 ) ， 这 
| 是 现代 网 站 中 常用 的 手法 ， 这 种 手法 很 
容易 吸引 访客 ， 并 调动 访客 的 热情 。 


的 宣传 画 中 ， 面 带 笑容 的 医生 很 好 地 塑 | 
造 了 一 种 和 入 可 亲 的 形象 ， 让 访客 感受 | 
到 一 种 友好 、 热 情 的 氛围 。 这 种 方式 也 | 
广泛 应 用 于 医疗 类 的 网 页 设计 中 。 | 


团 CMYK=74.42.0.0 RGB=66.136.214 | ee 


: 上 CMYK=10.12.43.0 RGB=240.226.162 国 CMYK=97.80.23.0 RGB=0.70.139 

| 图 CMYK-57.79.100.38 RGB-99.54.24 国 CMYK=68.51.24.0 RGB=100.122.162 
: 团 CMYK=33,71.97.1 RGB=189.100.33 国 CMYK=69.6.6.0 RGB=20.190.240 

| 国 CMYK=83.42.29.0 RGB=0.128.165 
CMYR=6.6,11,0 RGB=243.240.230 


网 页 设计 的 流行 趋势 一 一 个 性 化 排版 
个 性 化 的 排版 通常 会 利用 精心 挑选 或 设计 的 漂亮 背景 ， 加 上 合理 的 页 面 布局 
觉 冲击 力 大 ， 可 以 很 好 地 吸引 访客 注意 。 
be 


可 
演 


ACCESS 
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该 网 页 布局 严谨 、 条 理 清 晰 ， 整 体 | 
上 给 人 一 种 严肃 、 认 真 的 感觉 。 在 右 侧 | 


需 9 小 


型 流 染 路 辣 习 号 上 闪 可 审 


:= 


医疗 类 网 页 设计 赏析 


NORTH 
YORK 
GENERAL sin rig Digireree 


”ls 


I pa Your Holidays 
SS with a Greater Peace of Mind 
ZE © 


体育 类 的 网 页 通常 用 来 传递 体育 资讯 、 弘 扬 体育 精神 ， 这 类 网 站 通常 内 容 丰 富 ， 
图 像 较 多 ， 利 用 图 形 去 传递 信息 和 吸引 访客 的 眼球 。 

体育 类 的 网 页 设计 要 注意 以 下 几 点 。 

(1 ) 文字 内 容 要 简捷 ， 重 点 突出 ， 字 体 、 字 号 、 字 型 都 要 合适 。 

(2 ) 界面 处 理 动静 结合 且 适 当 。 
( 3 ) 布局 合理 ， 简 捷 、 协 调 、 美 观 ， 画 面 均衡 。 
(4 ) 同样 的 界面 要 具有 一 致 性 和 连贯 性 的 行为 。 
( 
( 


5 ) 各 种 提示 信息 要 简单 、 清 晰 。 
6 ) 色彩 统一 、 协 调 ， 同 一 页 面 避免 使 用 三 种 以 上 的 颜色 。 
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5.14.1 积极 风格 的 体育 类 网 页 设计 


喜欢 运动 的 人 大 多 有 着 健康 的 体 映 、 积 极 向 上 的 心理 ， 这 也 是 体育 精神 的 一 种 表 
现 。 积 极 风格 的 网 页 设计 正 与 体育 精神 相 吻 合 。 通 常 ， 积 极 风格 的 体育 类 网 页 设计 能 
让 人 有 一 种 i 党 
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设计 理 这 是 一 个 采用 标题 正文 鲍 穿 红色 衣服 的 人 物 在 对 比 色 配 色 |; 
i 型 网 页 布局 的 设计 作品 ， 画 面 中 标题 文 ; 的 作用 下 ， 也 非常 抢眼 。 | 
| 字 非 常 的 突出 ， 非 常 具 有 震撼 力 。 而 且 ; 侈 人 物 坚毅 的 眼神 与 整个 画面 的 感 | 
i 很 好 地 传递 了 文字 信息 ， 让 访客 对 内 容 ; 觉 相 统一 ， 整 个 画面 非常 具有 力量 感 和 | 
| 一 目 了 然 。 | 说 服 力 。 
: 色彩 点 评 : 该 网 页 采用 对 比 色 的 配色 | 本 吨 古 时 CMYK=22.98.95.0 RGB=209.29.35 
| 方案 ， 大 面 的 青色 搭配 少量 的 红色 ， 产 | I CMYK=99.90.60.39 RGB=10.38.64 
| 了 对 比 效果 ， 让 画面 更 具 视觉 冲击 力 。 | 针对 是 时 和 CMYK-86.65.23.0 RGB-48.94.150 


水 ， 
俐 面 硬 中 暗 角 的 处 理 让 视线 集中 在 : CMYK=17.0.54.0 RGB=255.253,139 
CMYK=4.2.3.0 RGB=247.248.248 


:位置 


融 雍 当中 辣 习 吕 上 持 间 到 间 需 9 小 


hy 
计 


野 非 常 具有 代入 感 。 画 面 中 虽然 文字 内 | 
容 较 少 ， 但 视觉 设计 丰富 而 不 单调 。 


CMYK=7.9.13.0RGB=241.234.223 

园 CMYK=74.36.17.0RGB=63.143.190 
a 国 CMYK=82.50.19.0 RGB=39.118.171 

该 网 页 以 大 图 作为 背景 ， 宽 ; 国 CMYK=100.95.59.41 RGB=11.31.61 


未 豆 塞 半 节 蔬 曙 


精致 而 富有 张力 的 影像 来 营造 氛 围 , 在 | 
民 大 程度 上 提高 了 用 户 的 积极 性 。 


TY 的 g te 园 CMYK=40.100.100.6 RGB=170.11,32 
RESTBILLETTER 人 UNGARN - REGISTRER DEG HER! 团 CMYK=67.36.99.0 RGB=105.142.50 
贺 | CMYK=0.0.0.0 RGB=250.250.250 
国 CMYRK=68.59.56.6 RGB=101.101.101 
CMYK=79.73.72.44 RGB=52,53,52 


3 主体 颜色 , 让 访客 


5.14.2 整洁 风格 的 体育 类 网 页 设 


整洁 风格 的 网 页 设计 通常 干净 大方, 去 繁 就 简 , 条 理 请 晰 。 它 ee 
但 是 主要 的 内 容 一 目 了 然 。 这 种 风格 的 网 页 设计 会 有 大 量 的 留 We 显得 整洁 而 
十 放 感 


人 字 侈 以 风景 素 
de ee ra pony 
开 以 并 不 显得 拥挤 。 不 仅 如 此 ， 该 网 页 ; 鲍 青 色 本 身 是 一 种 活泼 型 的 颜色 ， | 
备 的 导航 设计 使 得 整个 网 站 的 品质 感 ; 为 了 使 画面 稳定 下 来 ， 该 网 页 以 白色 搭 ; 
足 。 | 配 深 灰色 作为 导航 栏 ， 这 样 可 以 让 画面 ; 
色彩 点 评 : 这 是 一 个 以 滑雪 作为 主 ; 看 上 去 更 沉稳 、 踏 实 。 | 
的 网 页 设计 ， 青 色调 的 配色 给 人 一 种 } | EE CMYK=66.10,13.0 RGB=68.188.225 | 
冷 、 冰 凉 的 感受 ， 与 该 网 页 的 主题 相 EE CMYK=85.54.44.1 RGB=39.109.131 | 
| CMYK=80.76.73.51 RGB=44.44.44 
. | EE CMYK=76.66.58.15 RGB=76.83.91 
: CMYK=15.3.0.0RGB=223.240.255 


美的 图 片 和 简约 的 希 
| 愉悦 的 使 用 体验 。 


| CMYK=6.19.86.0 RGB=254.216.23 

| 国 CMYK=91.72.0.0 RGB=0.68.212 
CMYK=14.11.11.0 RGB=224.224.224 
口 CMYK=0.0.0.0 RGB=255.255.255 


A i 托 下 ， 让 网 站 内 容 在 视觉 上 脱颖而出 。 而 | 
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格式 化 得 更 容易 阅读 和 理解 。 


双色 搭配 


CMYR=5,28.84.0 RGB=253.199.42 

! CMYR=54.37.60.0 RGB=137.149.114 
转 CMYK=78.74.78.52 RGB=47.46.41 

CMYR=89,83,71,58 RGB=23.30.3 


， 更 容易 。 当 然 ， 这 里 说 


计 技术 让 内 容 可 以 被 组 织 和 


四 色 搭 配 


击 要 淋 闻 遍 惑 骨 卓 . 


串 州 平 扎 只 型 昼 习 


现在 互联 网 已 经 开始 普及 ， 很 多 餐饮 企业 都 建立 了 自己 的 网 站 ， 这 一 方面 能 够 给 


商家 提供 反馈 信息 , 另 一 方面 , 又 能 够 让 消费 者 直接 在 网 上 订餐 .。 在 设计 餐饮 类 网 页 时 ， 


通常 使 用 诱 人 色调 或 者 使 用 精美 的 食品 图 片 去 激发 消费 者 的 饮食 和 欲望。 在 本 案例 中 咖 


啡 馆 企 业 网 页 的 制作 上 


+ 


， 就 充分 地 利用 了 这 两 点 。 


( 1 ) 能 够 通过 色彩 、 图 片 等 元 素 突出 主题 。 


(2 ) 整个 网 页 的 和 有 
(3 ) 页 面 能 够 突 H 


fx 


(1 ) 网 页 选择 咖 虽 


和 局 要 合理 ， 并 要 营造 出 一 种 轻松 愉悦 的 感觉 。 
新 品 信息 。 


有 调 ， 紧 扣 网 页 的 主题 。 


(2 ) 网 页 采用 拐角 型 的 布局 方式 ， 图 片 和 文字 信息 之 间 相 互联 系 ， 条 理 清晰 。 


(3 ) 网 页 中 将 咖 虽 


上 图 片 放 在 比较 显眼 的 位 置 ， 这 样 能 够 起 到 很 好 的 宣传 作用 。 


该 网 页 整体 采用 咖啡 色调 ， 使 用 这 种 色调 ， 可 以 
紧 扣 网 页 的 主题 ， 能 够 引起 对 咖啡 味道 、 香 味 的 
联想 。 在 网 页 背景 的 处 理 上 ， 使 用 了 木板 纹理 作 
为 背景 ， 给 人 一 种 充实 感 。 前 景 中 采用 中 明度 和 
高 明 的 色彩 ， 与 背景 形成 对 比 ， 能 够 让 文字 更 容 
易 识别 


该 方案 降低 了 页 面 背景 的 颜色 ,增加 了 前 景 和 背 
景 的 对 比 度 ， 使 颜色 对 比 更 加 鲜明 。 同 时 将 左 侧 
的 模块 改 成 透明 ， 增 加 了 页 面 的 通 透 感 ， 使 画面 
效果 更 加 灵活 多 变 。 


该 方案 调整 了 网 页 的 色调 ， 同 时 ， 网 页 的 明度 也 
有 所 提高 。 卡 其 色调 的 页 面 可 以 给 人 一 种 亲切 、 
温暖 的 感觉 ， 同 时 ， 也 能 够 让 访客 联想 到 咖啡 的 
香气 。 


@ ati 


企业 建立 自己 的 网 站 , 不 仅 能 将 自己 的 优势 推广 出 去 , 还 要 能 够 满足 用 户 的 需要 。 
这 是 一 家 教育 机 构 的 企业 网 站 ， 网 站 的 首页 部 分 以 大 图 作为 背景 ， 给 人 大 气 、 开 阔 的 
第 一 印象 。 下 方 的 页 面 图 文 并 茂 ， 简 洁 大 方 。 


9x 


(1 ) 能 够 从 网 页 中 体现 出 企业 文化 和 企业 特色 。 

(2 ) 让 网 页 中 的 文字 与 图 像 相 结合 ， 体 现 出 信息 的 真实 性 。 
(3 ) 整个 页 面 风格 要 大 方 、 严 谨 、 理 性 。 

(4 ) 整体 颜色 效果 要 干练 、 统 一 。 


@ 本 7 


( 1 ) 网 页 首页 部 分 采用 大 图 作为 背景 ， 图 片 具 有 同舟 共 济 、 同 心 协力 的 含义 。 
(2 ) 网 页 以 蓝 色 作为 主 色调 ,给 人 以 一 种 稳重 、 理 性 的 感觉 。 

( 3 ) 该 网 页 导航 清晰 ， 简 洁 的 导航 栏 与 整个 页 面 的 风格 相 呼 应 。 

( 4) 网 页 整体 构图 简约 ， 信 息 专业 且 具 有 说 服 力 。 


该 网 页 以 蓝 色 作为 主 色调 ， 以 白色 作为 辅助 色 

两 者 搭配 在 一 起 ， 有 一 种 既 稳重 又 落落 大 方 的 感 
觉 。 蓝 色 能 够 给 人 一 种 理性 、 坚 硬 的 感觉 ， 和 白色 
的 加 入 ， 减 淡 了 这 种 感觉 ， 让 整体 效果 变 得 更 加 
安静 、 沉 稳 。 


Bo 
HA 


需 9 小 


型 流 染 路 辣 到 号 上 后 人 间 可 宗 


在 该 网 页 中 ， 将 主 色调 更 改 为 深 青 灰色 ， 网 页 的 
整体 明度 变 低 了 ， 整个 网 页 给 人 的 感觉 是 严 天、 
认真 的 。 这 时 ， 青 绿色 的 点 缀 色 变 得 十 分 抢眼 。 


未 下 各 半 区 蔬 曙 导 


在 该 网 页 中 ， 将 青绿 色 作 为 主 色 调 ， 青 绿色 的 特 
性 是 活 泌 、 明 快 ， 作 为 企业 网 站 的 主 色调 ， 能 够 
给 访客 留 下 深刻 的 印象 。 若 大 面积 使 用 该 颜色 
则 有 悖 于 企业 网 站 的 宗旨 ， 所 以 在 下 方 版 面 中 使 
用 了 浅 灰色 作为 背景 ， 这 样 ， 能 让 整个 网 页 看 起 
来 稳重 、 端 庄 。 


@ 十 


数码 产品 是 科技 与 时 尚 的 象征 ， 若 要 使 数码 产品 在 这 个 高 度 视觉 化 的 时 代 中 脱 颖 
而 出 ， 那 么 它 必 须 能 够 凸显 数码 类 产品 的 特点 ， 并 且 做 到 色调 与 风格 相 统 一 。 


从 大 束 


(1 ) 网 站 整体 布局 要 优美 、 大 方 ， 能 够 让 访客 体会 到 科技 的 魅力 。 
(2 ) 网 页 要 在 第 一 时 间 向 访客 传递 出 商品 的 基本 信息 。 
(3 ) 网 页 的 基本 信息 要 主 次 分 明 ， 将 主打 产品 推广 出 去 。 


fx 二 


(1 ) 网 站 的 首页 以 网 页 广告 为 主 ， 主 要 对 新 产品 有 宣传 、 推 广 的 作用 。 
(2 ) 网 页 整体 的 布局 简约 、 大 方 ， 没 有 复杂 的 装饰 和 文字 。 
四 (3 ) 网 页 中 主打 产品 占据 二 分 之 一 的 版 面 ， 使 得 它 变 得 更 加 具有 吸引 力 。 


该 网 页 以 黑色 作为 导航 栏 的 颜色 ， 这 说 明 它 以 黑 
色 作为 主 色调 。 网 页 黑色 与 白色 进行 搭配 ， 大 面 
积 的 白色 冲淡 了 黑色 的 压抑 感 ， 让 整个 画面 的 色 
彩 更 加 协调 。 


需 9 潞 


该 网 页 更 改 了 网 页 的 布局 和 色调 。 经 过 更 改 后 ， 

网 页 为 单 色调 的 配色 方案 ， 咖啡色 给 人 一 种 高 档 、 
高 品质 的 视觉 感受 。 网 页 的 首页 变 成 满 版 型 的 布 
局 ， 使 网 页 广告 更 具有 冲击 力 。 下 方 版 面 是 骨骼 
型 的 构图 ， 让 每 一 件 商 品 都 能 得 到 很 好 的 展示 st 


型 汶 染 中 辣 习 号 后 人 闻 可 剂 


蓝 色 是 最 能 代表 科技 感 的 颜色 ， 该 网 页 以 深蓝 色 
为 主 色 调 ， 给 人 一 种 冷静 、 理 智 的 视觉 感受 。 网 
页 的 背景 和 导航 栏 为 两 种 不 同 明度 的 蓝 色 ， 这 样 
的 设计 可 以 增加 网 页 的 层次 感 ， 让 网 页 的 代入 感 
更 加 强烈 


公益 类 网 页 的 设计 方案 


@ itin 


这 是 一 个 专门 针对 大 类 的 公益 网 站 ， 致 力 于 犬 类 领养 、 救 助 、 公 益 、 社 交 等 


面 需求 。 
息 交 互 


方 


该 网 站 利 


多 
网 络 交互 特性 ， 正 在 努力 打造 成 渗透 面 最 广 的 犬 类 主题 的 公益 信 


FEF 台 。 网 站 的 


宗旨 是 “交流 、 互 助 、 平 等 ”， 致 力 于 和 谐 、 温 馨 的 交流 。 


击 否 淋 手 启东 骨 目 : 


网 
页 
配 
色 
设 
计 
手 
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> 商家 要 求 


(1 ) 用 简洁 的 方式 ， 概 括 出 网 站 的 中 心思 想 。 
(2 ) 能 够 从 色调 上 追求 一 种 平和 和、 包容 的 意境 。 
( 3 ) 整个 网 页 的 布局 要 注重 一 种 友好 性 ， 能 够 突出 善待 动物 、 保 护 动物 的 主题 。 


@@ 后 x 二 


(1 ) 网 页 使 用 浅 卡其 色 作 为 主 色调 ， 这 是 一 种 具有 温暖 感觉 的 颜色 ,给 人 一 种 很 
平静 、 和 平 的 感受 ,符合 公 益 网 页 的 主题 。 
(2 ) 网 页 整体 布局 比较 简约 ， 搭 配 上 高 明度 的 色彩 基调 ， 显 得 落落 大 方 。 
( 3 ) 网 页 右 侧 可 爱 狗 狗 的 形象 非常 有 吸引 力 ， 能 够 吸引 爱心 人 士 的 注意 ， 激 发 他 
们 的 保护 欲望 。 


网 站 整体 选择 较为 轻柔 的 色调 ， 利 用 满 版 型 的 构 
图 方式 去 营造 一 种 平静 、 安 详 的 气氛 。 网 站 构图 
较为 简单 ， 导 航 栏 、 标 题 文 字 等 文字 信息 集中 在 
画面 的 左上 角 ， 符 合 阅读 习惯 ， 便 于 访客 在 较 短 
时 间 内 了 解 网 站 的 信息 。 


该 网 页 将 绿色 作为 主 色调 ， 将 背景 颜色 更 改 为 白 
色 。 绿 色 和 象征 着 和 平 、 希 望 ， 寅 意 是 该 网 站 中 所 
救助 的 狗 都 能 得 到 自己 幸福 的 归宿 。 


该 网 页 更 改 了 网 页 的 颜色 和 布局 。 中 明度 的 灰色 
给 人 一 种 温和 但 不 沉闷 的 视觉 感受 。 网 页 下 方 是 
带 有 超 链接 的 图 片 ， 这 样 的 设计 不 仅 能 够 吸引 访 
客 的 注意 ， 还 能 够 根据 图 片 的 内 容 结合 文字 去 了 
解 信息 ， 是 一 种 很 实用 的 做 法 。 


类 网 页 的 设计 方案 


是 一 个 以 水 稻 种 植 、 培 育 、 杂 交 、 防 虫害 等 为 中 心 内 容 的 农业 类 型 网 页 设计 。 
该 网 站 以 培育 高 品质 有 机 大 米 为 宗旨 ， 是 根植 于 水 稻 行业 ， 集 水 稻 种 植 和 销售 于 一 体 
的 网 络 平台 。 


© 商家 要 求 


) 要 求 主题 突出 、 寓 意 深刻 。 
en 
(3 ) 网 页 的 颜色 要 能 够 贴近 自然 ， 反映 出 农业 的 特色 。 


fx 坟 


( 1 ) 网 页 整体 以 绿色 为 主题 颜色 ， 从 颜色 上 就 能 体现 出 农业 这 一 
(2 ) 网 页 布局 为 拐角 型 的 布局 方式 ， 整 体 造 型 简约 、 现 代 。 
(3 ) 网 页 中 所 选 的 图 像 能 够 紧 扣 网 页 主题 ， 让 访客 对 网 页 的 基本 信息 有 大 概 的 


该 网 页 以 中 明度 的 绿色 为 主 色 调 ， 绿 色 象征 着 天 
然 、 健 康 ， 这 一 点 与 农业 网 站 的 主题 相 契 合 。 网 
页 主页 中 ， 成 熟 、 饱 满 的 稻 穗 能 够 引起 访客 的 无 
限 遐 想 。 


该 网 页 将 主 色 更 改 为 亮 灰色 调 ， 亮 灰色 与 白色 的 

搭配 能 够 带 给 人 一 种 和 干净、 谦虚 的 心理 感受 。 以 

这 种 色调 为 网 页 的 背景 ， 可 以 保证 前 景 中 的 内 容 
不 被 颜色 所 淹没 。 网 页 中 以 绿色 为 点 缀 色 ， 它 与 
灰色 形成 了 对 比 效 果 ， 使 它 在 整个 画面 中 变 得 非 
常 显眼 。 


Bo 
HH9 


山 5 潞 


型 流 染 中 辣 到 号 上 持 划 可 计 


击 吾 淋 手 启东 明 目 . 


该 网 页 将 主 色 调 更 改 为 嫩绿 色 ， 嫩 绿色 的 特点 是 
清新 、 可 爱 ， 它 象征 着 希望 、 娇 嫩 ， 也 非常 适合 
用 作 农 业 网 站 的 主 色 调 。 网 页 在 布局 上 也 做 了 调 
整 ， 该 网 页 为 通栏 型 的 布局 方式 ， 整 体 效 果 变 得 
开阔 、 大 方 。 


在 人 类 的 视觉 感受 中 ， 色 彩 是 不 可 或 缺 的 视觉 元 素 ， 优 秀 的 色彩 搭配 可 以 让 整个 页 
面 更 具有 艺术 感染 力 。 同 时 ， 色 彩 也 能 够 给 人 不 同 的 视觉 印象 ， 这 是 因为 ， 不 同 波长 色 
彩 的 光 作 用 于 人 的 视觉 器 官 ， 通 过 视觉 神经 传 入 大 脑 后 ， 经 过 思维 ， 与 以 前 的 记忆 和 经 
验 产生 联想 ， 从 而 形成 一 系列 的 色彩 心理 反应 。 例 如 要 做 一 个 环保 主题 的 网 页 ， 那 么 首 
先 联想 到 的 就 是 生命 、 自 然 ， 而 这 些 联想 的 事物 共同 色 系 就 是 绿色 ， 这 就 是 视觉 印象 。 
合理 地 运用 视觉 印象 ， 选 择 被 认 知 的 颜色 ， 可 以 在 第 一 时 间 与 访客 进行 互动 ， 从 而 对 网 
站 的 主题 产生 共鸣 和 信赖 感 。 
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平和 于 于 中 于 中 宇和 中 
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Pc = 一 | 
i 月 WW 


清凉 是 一 种 凉 而 清爽 的 感觉 ， 它 是 炎炎 夏 日 中 的 冰镇 西 扩 ， 是 初夏 宁静 的 傍晚 ， 
是 海边 的 一 缕 清 风 。 说 到 清凉 ,我 们 也 可 联想 到 大 海 、 天 空 、 水 域 、 冰 等 元 素 。 

相关 词语 : 凉爽 、 冰 凉 、 舒 畅 。 

代表 颜色 : 蓝 色 、 天 蓝 色 、 水 晶 蓝 、 青 色 、 水 清 色 、 青 绿色 。 

应 用 行业 : Wt 冷饮 类 、 旅 游 类 。 


| We 该 网 页 的 布 i 中 黄色 的 商品 非常 引 人 注意 。 | 
| 意 ， 它 将 版 面 分 为 两 个 部 分 ， 左 侧 为 实景 。 乌 该 网 页 中 内 容 较 少 ， 在 布局 上 也 | 
| 照片 ， 右 侧 为 矢量 插画 ， 这 样 的 效果 既 有 | 十 分 简单 ， 所 以 整个 页 面 主题 突出 ， 方 | 
| 一 种 对 称 的 美感 ， 又 有 多 元 的 变化 。 | 便 使 用 。 | 
| 色彩 点 评 : 该 网 页 采用 痰 青色 作为 i : 编 痰 青色 与 白色 的 搭配 让 画面 的 色 | 
i 主 色 调 ， 给 人 一 种 清爽 、 冰 凉 的 感觉 。 | 彩 更 加 明亮 、 干净 。 | 
| 尤其 是 在 夏天 ， 若 看 见 这 样 的 网 页 ， 心 | 到 到 时 CMYK=73.16,7.0RGB=0.175,229 | 
| 情 一 定 会 很 舒畅 ， 还 会 引发 消费 者 的 购 | | NN CMYK=-53.6100RGB-121.204233 | 


: 买 欲 望 。 这 样 就 达到 了 网 页 吸引 访客 注 | CMTYK=10.3.0.0 RGB=235.244.253 
| 意 、 促 进 商 品 销售 的 目的 。 CMYK=9.5.4.0 RGB=237.241.244 


独 青 色 与 黄色 为 对 比 色 ， 所 以 网 页 | | mm CMYK=9.5.4.0 RGB=237.241.244 


绿色 与 青色 的 搭配 让 人 觉得 画面 色彩 统 | 
、 协 调 。 这 样 海报 式 的 画面 结构 也 可 ; 
以 为 访客 留 下 深刻 的 印象 。 | 


门 CMYRK=0.0.0.0 RGB=255,255.255 
团 CMYK=72.19.12.0 RGB=45.171.218 
国 CMYK=79.36.0.0 RGB= 0.142.218 
国 CMYK=70.0.28.0 RGB= 0.197.206 | 
采用 类 似 色 的 配色 方案 ， 青 | 圈 CMYK=59.0.41.0RGB= 0.246.197 | 


、 痰 蓝 色 这 样 比较 清新 的 颜色 ,但 是 | 二 
在 该 网 页 中 ， 这 种 深蓝 色 反倒 是 让 访客 | 
| 眼前 一 亮 。 同 时 ， 整 个 画面 颜色 的 反差 : 

较 大 ， 也 具有 强烈 的 视觉 冲击 力 。 


CMYK=26.0.18.0 RGB=201.241.226 
CMYR=26.0,18.0 RGB=201.241,226 


CMYK=0.43.59.0 RGB=255.174.107 
选择 深蓝 色 作为 主体 颜色 ,是 一 种 Ml CMYK=0.58.18.0 RGB=254.143.165 


| 打破 常规 的 配色 方法 ， 因为 一 人 CMYK=32,59,.0 RGB=189.146,108 


颜色 有 “性 别 ” 
每 个 人 都 有 自己 的 颜色 喜好 , 而 且 男性 与 女性 之 间 的 喜好 还 有 所 不 同 。 调查 显示 ， 


男性 和 女性 都 喜欢 蓝 色 和 绿色 ， 男 性 和 女性 都 比较 讨厌 框 色 和 神色 。 而 不 同 的 是 ， 男 
性 喜好 黑色 、 讨 厌 紫色 ， 喜欢 的 颜色 。 ”| ”喜欢 的 颜色 


女性 则 二 好 靖 色 、 讨 厌 大 
色 ,所 以 说 闫 色 是 有 "性 别 ” “全 @ ©@ @ 
之 分 的 。 在 网 页 设计 的 配 


色 中 ， 不 妨 考虑 网 页 的 受 


众 群体 ， 然 后 再 去 考虑 网 9 @ ee] 福 色 ®@ 
页 的 色彩 搭配 。 女 
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人 了 热 导 


热情 指 人 参与 活动 或 对 待 别人 所 表现 出 来 的 热烈 、 积 极 、 主 动 、 友 好 的 情感 或 态度 。 
提 到 激情 ， 我 们 可 以 联想 到 好 客 的 主人 、 积 极 向 上 的 情绪 ， 以 及 高 涨 的 情绪 。 能 够 代 
表 热情 的 颜色 通常 是 暖色 调 ， 因 为 暖色 调 让 人 感觉 温暖 ， 友 好 。 
相关 词语 : 激情 、 热 烈 、 有 爱 、 善 良 、 真 诚 、 友 好 。 
代表 颜色 : 黄色 、 红 色 、 橙 色 、 绿 色 。 


» 


| 整个 画面 呈现 出 节日 的 热情 气氛 。 
作 在 该 网 页 中 ,以 橘红 色 为 点 级 色 ， | 
| 这 种 采用 类 似 色 作为 点 级 色 的 方法 ， 在 | 
| 同类 色 配 色 方案 中 也 十 分 常用 。 | 
: 作 在 该 网 页 中 ， 白 色 不 仅 是 点 级 色 ， | 
| 还 有 提 亮 画面 凯 色 ,让 文字 更 加 突出 的 作用 ,| 
一 > 网 页 中 各 部 分 条 理 清晰 ， 让 访客 在 
| 设计 理念 ， 该 网 页 采用 “ 口 ” 字 型 | 第 一 时 间 内 就 能 了 解 网 页 的 主要 功能 。 。 | 
| 的 布局 方式 ， 将 画面 主要 内 容 集中 在 一 | 用 CMYK=12.99.100.0 RGB=227.0.11 
| 起 ， 可 以 让 访客 的 视线 集中 ， 让 网 页 的 | ECMYK-54.100100.44RGB-9904 
| 主题 表现 得 更 加 明确 。 | NE CMYK=10.90.98.0 RGB-231.5618 
| ”色彩 点 评 : 该 网 页 以 红色 为 主 色调 ， | 时 是 时 CMYK=100.100,.100.100RGB-0.0.0 | 
用 单 色调 的 配色 方案 , 整体 色调 和 谐 、 CMSYK=0.0.0.0 RGB-255.255.255 


ooeoeoccoDe 


EVEAYONE 
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ORANGE 
ATTITUDE | 


该 网 页 以 黄色 为 主 色调 ， 以 蓝 色 和 
红色 作为 点 缀 色 ， 是 对 比 色 配色 方案 。 


A 二 黄色 的 主 色调 给 人 友好 的 、 热 情 的 、 愉 | 
| 热情、 温暖 、 欢 乐 的 视觉 印象 。 海 报 型 | | 快 的 感觉 ， 然 后 对 比 色 配 色 方案 让 颜色 | 


| 的 布局 方式 ， 非 常 具有 艺术 表现 力 。 产生 而 机 ,使 画面 热情 的 气氛 更 加 浓烈 


| DCMYK=0.0.0.0 RGB=255.255,255 
| 国 CMYK=25.79.100.0 RGB=204.84.2 

| 国 CMYK=26.89.100.0 RGB=203.59.15 

| 园 CMYK=0.72.92.0 RGB=255.105.0 

| CMYK=18.47.42.0 RGB=218.156.138 


国 CMYK=55.82.100.34 RGB=109.52.9 

转 CMYK=7.98.90.0 RGB=235.9.33 

国 CMYK=100.99.36.1 RGB=33.40.117 
CMYK=7.0.48.0 RGB=253.251.157 

图 

三 CMYK=7.14.73.0 RGB=252.224.83 

CMYK=247.177.12 RGB=6.39.91.0 


网 页 设计 中 配色 的 忌讳 


颜色 能 够 给 访客 一 个 最 基本 的 视觉 印象 ， 恰 当 的 色调 运用 ， 能 够 帮助 突出 产品 特 
色 以 及 经 营 理念 等 ， 促 进 企业 的 网 络 营销 。 在 网 页 配色 中 ， 有 以 下 几 点 忌讳 。 


@ a 


画面 颜色 要 简单 、 干 净 ， 背景 与 文字 对 比 要 强烈 。 浑浊 的 颜色 会 使 访客 失去 热情 。 


@ 鼠 纯 


高 纯度 的 颜色 太 艳 丽 , 对 人 眼 的 刺激 太 强 烈 , 容易 引起 缺乏 内 涵 、 不 够 含蓄 的 后 果 


作弄 


配色 讲究 相互 映衬 ， 不 能 脱离 整体 。 


@ at 


网 页 的 配色 通常 以 一 种 颜色 为 主 色调 ， 颜 色 太 多 会 干扰 访客 的 视线 。 


ED 


这 种 “ 弱 ” 是 对 比 的 弱 。 虽 然 对 比 弱 能 够 产生 一 种 柔和 、 温 柔 的 视觉 感受 ， 但 对 
比 过 弱 的 话 ， 就 会 显得 过 于 苍白 。 


配色 方案 


o 


ORAMGINA 
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如 如 证 省 要 浊 中 六 司 册 9 商 


若 要 制作 一 个 看 起 来 干净 的 网 页 ， 首 先 颜色 需要 选择 高 明度 、 低 纯度 的 颜色 ， 白 
色 是 最 常用 的 颜色 ;其 次 是 内 容 要 简单 ， 例 如 选择 简单 的 图 案 和 简约 的 布局 方式 等 。 

相关 词语 : 简洁 、 洁 净 、 素 雅 、 利 落 、 整 洁 。 

代表 颜色 : 白 、 月 光 白 、 雪 白 、 象 牙 白 、 亮 灰 、 浅 粉红 、 奶 黄 、 白 青色 、 爱 丽 丝 蓝 、 
水 晶 蓝 。 
应 用 行业 : 餐饮 类 、 食 品类 、 美 妆 类 、 设 计 类 、 医 疗 类 。 


| 种 很 柔和 的 视觉 感受 。 | 
| eri 
i 和 的 曲线 美感 。 | 
了 直 扩 的 委 江 文字 打破 了 常规 的 交 | 
| 读 方式 ， 可 以 吸引 访客 的 注意 。 

| 侠 网 页 的 色彩 季 和 、 干 净 才 符合 网 | 
| 站 的 主题 , 也 才能 给 人 一 种 舒缓 、 镇定 、 

] 友好 的 感觉。 


Er 

| Fr 拘 图 二 分 简洁 。 | CMSYK=12.14.8.0 RGB=229.229.229 
色彩 点 评 ， 该 网 页 采用 高 明度 、 低 | CMYK=12,5,21,0 RGB=233.237.212 

| 纯度 的 配色 方案 ， 虽然 画 面 中 颜色 种 | | EE CMY K-81.76.74.53 RGB-42.42.42 


| 类 多 ， 但 都 是 对 比 很 弱 ， 所 以 给 人 一 ; 


| 该 网 页 以 灰色 作为 主 色调 ,然后 用 ; | 说 到 干净 不 得 不 提 白 色 ， 下 名 本 
| 一 种 低 饱 和 度 的 颜色 做 点 级 色 ， 这 个 画 | | 就 是 非常 干净 的 颜色 , 例如 在 该 网 页 中 ，| 
| 面 给 人 一 种 干净 、 优 雅 的 视觉 体验 。 “| | 以 白色 作为 底 色 ， 加 上 少许 青色 、 紫色 | | 
ol | i | 作为 点 缀 , 整体 效果 就 非常 干净 、 大 方 。| 
| 国 CMYK=11.77.49.0 RGB=231.92.102 | 看 本 | | 
| 国 CMYK=9.37.78.0RGB-241.179.68 ; | 国 CMYK=s663.0.0 RGB-159.105.226 

| 国 CMYK=69.14.53.0 RGB-74.173.144 | | 国 cMYK=s2.s2.00 RGB-15.119.235 

| 国 CMYK=s1.52.40.0 RGB-55.113.137 | | 国 CMYK=6s.0.15.0 RGB-13.199.232 

| 站]CMYK=3.3.2.0RGB=248.248.249 | | 国 cCMYK=69.29.00 RGB-70.160238 


: 吕 CMYK=0.0.0.0 RGB=255.255,255 


| 网 页 设 计 的 基本 是 路 

网 页 设计 随 着 时 代 的 发 展 ， 一 直 在 不 断 地 变化 着 ， 它 不 停 地 酒 现 着 各 种 新 思潮 、 
新 理念 、 新 技术 。 虽 然 如 此 ， 网 页 设计 的 基本 思路 是 不 变 的 。 

(1 ) 内 容 决定 形式 。 

先 把 内 容 充 实 上 ， 再 分 区 块 ， 再 定 色调 ， 再 处 理 细节 。 

(2 ) 先 整 体 ， 后 局 部 ， 最 后 回归 到 整体 。 

在 设计 之 初 ， 要 从 全 局 进行 考虑 ， 有 一 个 大 的 方向 ， 然 后 定 基调 ， 分 模块 设计 ; 
最 后 调整 不 满意 的 几 个 局 部 细节 。 

( 3 ) 功能 决定 设计 方向 。 

在 设计 网 页 的 时 候 一 定 要 考虑 网 页 的 用 途 。 例 如 为 教育 网 站 进行 设计 ， 那 和 就 要 
突出 师资 和 课程 。 
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环保 是 一 种 新 的 生活 理念 ， 是 一 种 人 与 环境 之 间 的 协调 关系 。 说 到 环保 ， 我 们 第 
一 时 间 想 到 的 就 是 绿色 ， 因 为 绿色 代表 着 森林 ， 代 表 着 自然 ;我们 也 能 想到 蓝 色 ， 因 
为 蓝 色 可 以 是 晴朗 的 天 空 、 湛 蓝 的 湖水 。 
相关 词语 : 绿色 、 健 康 、 节 能 、 卫 生 。 
代表 颜色 : 绿色 、 白 色 、 蓝 色 。 


各 绿色， 给 人 一 种 深沉 、 严 赴 的 感觉 ， 在 表 | 
遇 环 保 这 一 主题 上 显得 非常 具有 说 服 力 。 | 
铂 孔 省 石 绿 与 黑色 的 搭配 象征 着 自 | 
然 的 博大 与 接纳 。 : 
例 网 页 中 左 侧 的 导航 栏 简单 易 懂 ， | 
便于 使 用 。 : 
设计 理念 : 网 页 以 矩形 为 分 割 方式 ， 和 P | 
将 画面 分 为 四 份 。 每 一 份 都 有 自己 的 职 | 所 多 四 由 呈 ， 罗 形 的 图 案 打 破 了 短 形 
| 能 ,组合 起 来 又 相互 关联 ,形成 一 个 整体 。; gm CMYk=77.13.59.0 RGB=0.168.134 | 
| 色彩 点 评 : 绿色 是 最 能 体现 环保 的 | CMYK=85.80.79.66 RGB-26.26.26 
| 颜色 ， 绿 色 有 很 多 种 ， 选 择 哪 一 种 绿色 作 | CMYK=0.0.0.0RGB=255.255.255 
| 为 主体 颜色 ， 就 是 设计 师 需 要 考虑 的 了 。 | CMYK=33.26.25.0RGB=182.182.182 | 


人 9) 


WI SOE? 


”该 网 页 的 配色 特别 能 够 体现 环保 这 比较 浓 角 ， 是 由 
| 一 视觉 印象 ， 大 面积 的 白色 给 人 干净 、 ; | 过 渡 到 蓝 色 ， 这 也 象征 着 从 森林 到 海 | 


洋 。 虽 然 画面 颜色 比较 简单 ， 但 是 ,这 | 
种 从 一 种 色相 过 渡 到 另 一 种 色相 的 配色 | 
方式 ， 给 访客 带 来 了 无 尽 的 想象 空间 。 | 


口 CMYK=0.0.0.0 RGB=255.255,255 
国 CMYK=73.0.100.0 RGB=25.186.13 
国 CMYK=100.98.55.8 RGB= 0.35.100 


| 透明 、 纯 净 的 感觉 ， 然 后 以 绿色 作为 
| 级 色 ， 给 人 一 种 健康 、 活 力 的 感觉 。 整 
| 个 画面 在 色彩 明度 上 没有 强烈 的 对 比 ， 
| 所 以 画面 整体 效果 看 上 去 自然 、 清 新 。 


| 国 CMYK=76.14.91.0 RGB=44.166.73 

| 国 CMYK=154.203.60 RGB=48.4.88.0 

| CMYK=21.16.15.0 RGB=210.210.210 
CMYK=0.0.0.0 RGB=255.255.255 
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进度 条 与 加 载 图 标的 妙用 


于 网 页 的 内 容 、 网 站 的 带宽 等 因素 都 会 影响 网 页 的 加 载 速度 。 为 了 避免 用 户 在 
等 待 的 过 程 中 退出 ， 通 常会 利用 进度 条 告知 用 户 大 概 还 有 多 久 。 通 过 人 性 化 的 设计 去 
表达 进度 条 或 加 载 图 标 ， 将 它们 变 成 具有 创意 的 形态 ， 这 样 可 以 吸引 访客 留 在 网 页 中 
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| 红色 在 这 样 的 色调 中 显得 异常 鲜 移 ， 是 
| 整个 画面 的 点 睛 之 笔 。 


| 国 CMYK=16.98.100.0 RGB=221.16.18 
: 国 CMYK=59.53.67.4 RGB=125.117.91 
| 国 CMYK=72.65.61.16 RGB=87.85.86 

| 转 CMYK=100.100.100.100 RGB=0.0.0 


6.5 _ 宇 便 


如 果 要 用 颜色 去 表现 坚硬 的 质感 ， 那 么 它 必须 是 低 明 度 色彩 基调 。 生 活 中 常见 的 
比较 坚硬 的 东西 例如 石头 、 钢铁 都 是 低 明 度 的 色彩 基调 。 

相关 词语 : 强硬 、 刚 强 、 结 实 、 坚 固 、 健 壮 、 牢 固 。 

代表 颜色 : 黑色 、 深 灰 、 藏 蓝 深 褐色 、 深 咖啡 色 。 


Ar 六 YA 并 


的 感觉 。 
背景 颜色 ， 黄 定 了 坚硬 、 刚 毅 的 视觉 印 | 
象 ; 前 景 中 ， 青 色 的 点 缀 色 非 常 活泼 。 
文 种 色相 上 的 反差 完美 地 突出 了 主题 。 | 
全 从 背景 的 设计 到 前 景 的 排版 ， 整 | 
i 个 版 面 非 常 注重 留 白 的 处 理 ， 让 页 面 能 | 
tte 够 自由 呼吸 。 | 
例 对 于 网 页 中 一 些 难 理解 的 信息 或 | 
民 饱 满 的 感觉 , 但 是 。 | 文字 ,采用 图 案 的 表达 方法 非常 有 效 。 
文 是 因为 它 的 背景 与 前 景 处 理 非常 得 当 当 , | 侈 青色 的 点 级 色 起 到 锦上添花 的 | 
“透明 效果 的 背景 给 人 一 种 丰满 的 感觉 ，; 作用 。 | 
中 的 主要 内 容 却 采 用 了 留 白 的 手法 ， | EE CMY k=100.100.100.100 RGB-0.0.0 | 
民 好 地 将 主题 进行 了 突出 。 | EE CMYK=82.77.75.55 RGB-393939 | 


色彩 点 评 : 如 果 网 页 中 都 采用 低 明 CMYK=33,0.6.0 RGB=178,240,255 
的 配色 和 尖 会 产生 沉 间 、 | EECMYK=66.0.3.0RGB=0.204,255 


这 是 ST 深 | 
咖啡 色 主 体 色 调 给 人 一 种 高 端 、 品质 的 | 
感觉 。 een nd 
为 不 同 细节 进行 展示 ， 这 样 能 够 充分 地 | 
对 自己 的 产品 进行 展示 ， 让 访客 快速 地 ; 
了 解 主题 。 | 


CMYK=19.15.15.0 RGB=215.215.215 
国 CMYK=69.66.69.23 RGB=89.80.71 
国 CMYK=57.63.81.14 RGB=123.94.62 
国 CMYK=51.44.47.0 RGB=142.138.129 
| 国 CMYK=79.79.85.66 RGB=34.27.21 


这 是 一 个 非常 具有 民族 风格 的 页 面 
| 设计 ， 深 灰色 调 的 配色 方案 给 人 一 种 岁 
| 月 沉积 下 来 的 沧桑 美感 。 画 面 中 的 一 点 


对 于 一 个 网 页 而 言 ， 色 彩 是 一 项 重要 的 视觉 语言 。 优 秀 的 色彩 搭配 可 以 起 到 为 画 
面 锦 上 添 花 的 作用 。 
(1 ) 色彩 的 鲜明 性 。 网 页 中 鲜明 的 色彩 更 容易 引起 人 们 的 注 
(2 ) 色彩 的 独特 性 。 与 众 不 同 的 颜色 ， 给 人 一 种 全 新 的 视觉 感受 ， 使 访客 对 网 页 
产生 深刻 的 印象 。 
(3 ) 色彩 的 合适 性 。 在 选择 配色 方案 时 ， 要 从 网 页 中 的 内 容 出 发 ， 让 颜色 与 网 页 


= 


的 气氛 相 适 合 。 
(4) 色彩 的 联想 。 不 同 的 颜色 能 够 产生 不 同 的 联想 ， 选 择 色 彩 要 与 网 页 的 内 涵 关 
联 。 例 如 ， 红 色 能 够 使 人 联想 到 喜事 ， 台 


绿色 能 够 联想 到 森林 。 


串 州 平 扎 中 型 昼 


理性 是 讲义 词 ， 说 明 一 个 人 的 成 熟 举 止 和 谨慎 的 品行 。 若 要 让 配色 体现 理性 的 视 
觉 印象 ， 冷 色调 是 首选 ， 蓝 色 、 青 色 都 可 以 表现 理性 。 低 明度 的 色彩 基调 也 能 够 体现 


理性 。 但 在 配色 的 过 程 中 , 可 以 通过 颜色 明度 、 色 相 的 对 比 去 增加 画面 的 动感 和 韵味 ， 
这 样 才能 够 体现 出 一 种 思维 敏捷 、 理 性 大 方 的 感觉 。 

相关 词语 : 理智 、 明 智 、 冷 静 、 清 醒 。 

代表 颜色 : 黑色 、 深 灰 、 灰 色 、 藏 蓝 色 、 深 青色 。 


应 用 行业 : 教育 类 、 法 律 类 、 服 装 类 、 科 技 类 。 


do the rigFE nes 
do things right. 


| [起 ” “该 网 页 为 科技 类 的 网 站 设计 ， 如 果 | 
要 表现 科技 ， 那 么 蓝 色 是 首选 的 颜色 。 | 
该 网 页 中 蓝 色 与 白色 的 搭配 给 人 一 种 理 | 
智 、 现 代 的 视觉 印象 。 | 
园 CMYK=59.41.21.0 RGB=123.143,176 


口 CMYK=0,0,0,0 RGB=255,255,255 
[LL] CMYK=9.5.5.0 RGB=236.240.241 


设计 理 放 网 页 中 既 有 丰富 的 文 
i 字 人 信息， 又 有 图 案 信 息 。 现 在 很 多 网 页 
i 都 希望 用 大 图 去 吸引 访客 ， 而 在 该 网 页 
| 中 ,排版 非常 理性 ,图文并茂 , 条 理 清晰 。 
| 色彩 点 评 : 该 网 页 采用 青 灰 色 的 主 
| 色调 , 这 种 颜色 可 以 代表 着 深沉 、 冷静 。 
| 画面 中 采用 单 色调 的 配色 方案 ， 颜 色 有 
| 节奏 的 变化 , 引导 访客 的 视线 向 下 移动 。 
| 侠 该 网 页 属于 低 明 度 色彩 基调 
| 白色 的 标题 文字 在 这 样 的 对 比 作用 下 显 
| 得 非常 突出 、 明 确 。 
| 侠 该 网 页 无 论 从 颜色 还 是 布局 方 
| 式 上 看 ， 表 达 都 非常 理性 ， 这 样 的 网 站 调 的 配色 ， 整 体 上 给 人 一 种 安静 、 稳 重 、 
| 深 受 男性 访客 的 喜爱 。 平和 的 视觉 感受 。 左 侧 的 版 面 颜色 较 深 ， | 
| 例 青 色调 同样 适用 于 忧郁 、 安 静 所 以 视觉 中 心 在 左 侧 , 文字 被 排放 在 这 里 。 | 
Eire I | 
‘ I CMYRK=97.91.73.66 RGB=4.15.29 | 
| EE CMYK-86.68,52.11 RGB-50.82.102 国 CMYK83.33.70.0 RGB-2.137.104 | 
| EE CMYK=5025 220 RGB-142.175.191 LCMYK=0.0.0.0 RGB=255.255,255 

| C100 ,100100100 RGB-000 国 CMYK=76.70.67.33 RGB=65.65.65 

| 国 CMYK=52.41.39.0 RGB=140.144.145 


CMYK=0.0.0.0 RGB=255.255.255 
CMYK=29.18.20.0 RGB=193.201.200 


网 页 的 风格 是 画面 的 整体 形象 给 浏览 者 的 综合 感受 。 这 个 整体 形象 包括 网 站 的 配 
色 、 字 体 、 页 面 布 局 、 页 面 内 容 、 交 互 性 、 海 报 、 宣传 请 等 因素 。 企业 网 站 是 对 外 的 
一 种 公共 形象 ， 所 以 它 一 般 与 企业 的 整体 形象 相 一 致 。 做 到 以 下 几 点 可 以 突出 网 页 的 
风格 。 


WH 页 的 Logo。 
Np 

号 召 力 的 宣传 标语 。 
hi 像 采 用 相同 效 呈 
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Pcel 


贡 要 淋 手 沁 品 骨 上 日 


国 序 健康 


说 到 健康 ， 我 们 首先 会 联想 到 健康 的 身体 ， 那 么 如 何 才能 有 一 个 健康 的 身体 呢 ? 
我 们 要 吃 健 康 的 食品 、 要 锻炼 身体 、 要 有 积极 的 心态 等 ， 所 以 ， 要 从 生活 中 去 寻找 能 
够 表现 健康 的 颜色 。 绿色 代表 自然 、 新 鲜 ; 黄色 、 橙 色 代 表 积极 向 上 ; 红色 代表 热 
激情 ; 青色 代表 年 轻 、 活 力 。 这 些 颜色 都 能 够 让 人 感受 到 健康 。 

相关 词语 : 健壮 、 强 健 、 生 机 、 活 力 、 积 极 。 
代表 颜色 : 绿色、 黄色、 橙色、 红色 、 青 色 。 
应 用 行业 : 食品 类 、 保 健 品 类 、 药 品类 、 教 育 类 、 农 副产品 类 、 化 妆 品 类 、 餐 饮 类 。 


在 该 网 页 中 ， | 
景 ， 画 面 中 都 是 新 鲜 的 蔬菜 ， 使 我 们 能 | 
够 感受 到 画面 传递 出 来 的 健康 视觉 感受 。| 


转 CMYK=20.99.100.0 RGB=214.9.0 
转 CMYK=15.91.100.0 RGB=223.53.4 
园 CMYK=8.68.97.0 RGB=237.114.0 
大 CMYK=5.22.89.0 RGB=254,209,1 
转 CMYK=63.98.45.6RGB=123.38.95 


| 富 , 文字 信息 很 多 ， 所 以 在 版 式 设计 上 
| 需要 花 很 多 功夫 。 网 页 自 上 而 下 , 标题 、 
| 正文 .副标题 等 文字 信息 都 很 具有 条 理 ， 
| 非常 便于 访客 的 阅读 和 理解 。 
| 色彩 点 评 ， 绿 色 是 非常 能 够 代表 健 
| 康 的 颜色 ， 绿 色 可 以 代表 树林 、 蔬 菜 、 
| 清新 的 空气 。 该 网 页 中 ， 就 是 采用 绿色 
| 的 配色 方案 , 整个 画面 色调 统一 、 和 谐 ， 
| 视觉 感受 非常 舒适 。 

| 全 该 网 页 中 采用 同类 色 渐变 的 手 
| 法 ， 这 样 的 配色 给 人 一 种 视觉 统一 ， 颜 


| 色 又 有 运动 的 感觉 。 二 本 | 
| 侠 网 页 中 还 使 用 到 了 类 似 色 作为 AS 


点 级 色 ， 这 样 的 配色 非常 有 活力 。 mep eed Rhee 
侈 在 该 网 页 中 ， 主 要 的 信息 是 通 We | 


| 过 文字 去 表达 的 ， 所 以 在 文字 的 排版 F | 喇 航 们 中 用 格 色 相 相 映 成 本。 
就 非常 重要 。 BE | 
| EE CMYK=69.8.100.0 RGB=77.177.3 团 CMYK=12.83.99.0 RGB=227.76.13 | 
| EECMYK=27.0.74.0RGB=-211.233.88 站 CMYK=0.0.0.0 RGB-255.255.255 
| NN CMYK=77.35.100.1 RGB=63.136.20 国 CMYK=37.50.56.0 RGB=179.139.111 
| CMYK=90.60.463 RGB=16.98.122 ; ;| |CMYK=11.6.5.0 RGB-231.236.240 


书 L'LL'\1 在 育 T 上 3 


图 形 无 处 不 在 ， 它 是 一 种 特殊 的 语言 ， 在 网 页 设计 中 随处 能 够 看 到 图 形 的 运用 。 


点 是 最 基本 图 形 ， 是 最 常见 的 图 形 之 一 。 在 网 页 中 ， 单 独 而 细小 的 形状 为 “点 ”， 点 
的 面积 较 小 , 但 是 它 的 形态 、 方向 、 位置、 大 小 都 可 以 变化 。 点 的 形态 变化 比较 灵活 ， 
点 排列 的 疏 密 程度 不 同 ， 也 会 给 人 不 同 的 空间 感 。 
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机 可 淋 半 沪 东 加 内 


甜蜜 
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甜蜜 可 以 是 一 种 口感 ， 也 可 以 是 一 种 感受 。 例 如 ， 吃 一 块 丝 滑 的 巧克力 味道 是 甜 
蜜 的 ， 一 段 美 好 的 爱情 感受 是 甜蜜 的 。 能 够 让 人 感觉 甜蜜 的 颜色 通常 为 高 明度 、 低 纯 
度 的 色调 ， 就 像 棉花 糖 的 颜色 。 

相关 词语 : 浪漫、 幸福 、 甜 美 、 愉 悦 、 和 舒适 、 可 爱 。 

代表 颜色 : 粉红 色 、 洋 红色 、 淡 紫色 。 

应 用 行业 : 婚庆 类 、 冷 饮 类 、 服 饰 类 、 甜 品类 、 母 婴 类 、 购 物 类 。 


”90 | 配色 方案 , 粉色 调 的 配色 给 人 一 种 温 喜 、 
机 吕 六 人 | 刊 密 的 感觉 该 网 页 设计 主要 针对 女性 ， 
| 粉色 调 的 配色 十 分 讨 女生 的 喜欢 。 
”会 网 页 中 所 宣传 的 商品 为 水 密 桃 口 | 
| 味 ， 粉 色调 的 配色 与 商品 口味 相 呼 应 。 
俐 从 画面 的 色调 及 配 图 能 联想 到 商 
品 的 口感 , 从 而 引起 消费 者 的 购买 欲望 。 
侈 画面 中 以 粉色 作为 主 色调 ， 红 色 | 


设计 理念 ， 该 网 页 采用 满 版 型 的 布 | ; 和 洋红 色 作为 点 级 色 ， 使 整个 画面 的 气 
| 局 方式 ， 整体 内 容 也 比较 多 。 商 品 图 片 ; | 氛 非 常 欢乐 多 彩 。 


| 所 占 面积 较 大 ， 所 以 具有 吸引 力 和 号 召 | 
| 力 。 画面 中 , 文字 条 理 清晰 ， 主 次 分 明 ， | 
| 很 容易 让 访客 理解 与 记忆。 


CMYK=0,31,3,0 RGB=255,202,220 
CMYK=1.9.0.0 RGB=252,240,250 
| ES CMYK=12.97.83.0 RGB=227.22.45 


Jin 0bp 司 呈 
TM Mec 
不 号 引 术 85%eudt 


;粉色 是 很 多 女孩 子 喜欢 的 颜色 ， 从 | 

| 表 着 可 爱 、 甜 密 、 浪 漫 。 该 网 页 选择 痰 | 
| 粉色 为 主 色调 ， 一 方面 是 因为 该 网 页 中 | 
| 所 宣传 的 商品 为 草莓 口味 的 ， 粉 红色 与 | 


| 的 紫色 调 给 人 一 种 亲情 、 放 松 的 愉悦 心 | 


| 理 感受 。 试 想 一 下 ， 一 个 母亲 抱 着 自己 | 


| 可 爱 的 婴儿 ， 此 刻 的 心情 就 该 是 那 种 耐 ， 


| 密 、 幸 福 的 感觉 吧 ! 


: 国 CMYK=61.66.12.0 RGB=127.102.164 
CMYK=13,15.,1.0 RGB=228.221.237 
CMYK=0.0.0.0 RGB=255.255.255 


| 商品 颜色 相 呼应 ; 另 一 方面 ， 粉 色调 很 ; 
| 讨 女孩 子 喜欢 ， 可 激发 购买 伺 。 | 


| 国 CMYK=3.94.77.0RGB=243.31.50 
| 回 CMYK=0.16.8.0RGB=254.229.227 
| 站]CMYK=0.7.2.0RGB=255.245.246 


网 页 中 图 形 的 运用 -- 线 


线 在 构图 中 起 着 表示 方向 、 长 短 、 重 量 、 刚 柔 的 作用 ,还 能 产生 方向 性 、 条 理性 。 
在 网 页 中 线 是 用 来 分 割 画面 的 主要 元 素 ， 以 线 为 构图 要 素 的 网 页 ， 可 以 给 人 一 种 规则 
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小 号 沽 落 号 染 跨 喇 于 册 9 滤 


串 州 圭 扎 中 型 导 司 


q 


生机 是 形容 生命 力 旺盛 的 样子 ， 对 此 ， 
嫩绿 的 叶子 在 拼命 


地 生长 ; 也 可 以 联想 到 出 生 的 婴儿 ， 在 大 声 地 啼哭 ， 向 世界 宣告 自 


我 们 可 以 联想 到 初春 的 大 地 ， 万 物 复 苏 ， 


己 的 降生 。 绿 色 是 最 能 代表 生机 的 颜色 ， 黄 绿色 调 代 表 新 发 的 嫩 叶 ， 虽 然 柔弱 ， 但 充 
满 希望 ;， 碍 绿 代表 初夏 的 森林 ， 象 征 着 旺盛 的 生命 力 。 


相关 词语 : 活力 、 希 望 、 
代表 颜色 : 


应 用 行业 : 农 副 类 、 


设计 类 、 食 品类 。 


GROW2SWARTER 


! 
! 
! 

! 


这 是 一 个 网 站 的 首页 ， 
| 画面 中 以 一 整 幅 大 图 作为 背景 ,给 人 一 种 | 
他 六、 宽阔 的 视觉 印象 。 图 片 中 ， 利 用 近 | 


设计 理 ; 


0 让 视线 向 远 处 延伸 。 


| 是 一 个 非常 有 活力 的 网 页 设计 ， 
we > 种 强 有 力 
| 的 视觉 冲击 力 。 在 该 网 页 中 ， 绿 色 可 以 
| 代表 大 地 ， 林 色 代表 阳光 ， 对 比 色 的 配 
| 色 方法 代表 着 生机 与 活力 。 


| 国 CMYK=10.0.83.0 RGB=255.252.0 
| 回 cMYK=0.0.0.0RGB-255.255.255 
| CMYK=0.46.88.0 RGB=255.165.25 
| 国 CMYK=68.19.100.0 RGB=92.165.24 


| 机 、 春 天 、 
| 的 几 行文 字 信 息 显得 简明 扼要 。 


绿色 、 进 取 、 旺 盛 。 
绿色 、 嫩 绿 、 黄 绿 、 黄 色 、 橙 色 。 


的 叶子 ， 紧 扣 网 页 的 主题 。 
合 该 网 页 中 ， 是 通过 图 像 去 表现 生 | 
农业 这 样 的 主题 的 ， 前 景 中 | 


侈 画面 中 其 他 的 颜色 都 比较 “浑浊 ”， 


; 很 好 地 将 前 景 的 中 嫩绿 色 图 像 衬 托 出 来 。 


侈 从 画面 中 新 翻 的 土地 和 嫩绿 的 叶 | 


| 子 可 以 看 出 是 春天 昌 个 画面 看 起 来 泛 


| 着 勃勃 的 生机 。 
| 52.21.99.0 RGB=146.175.31 


该 网 页 选择 了 单 色 调 的 配色 方案 ， | 
绿色 调 的 配色 给 人 一 种 自然 、 亲 切 、 生 | 
机 的 视觉 感受 。 画 面 中 ， 纯 色 面 积 占 得 | 
大 ， 图 像 和 文字 内 容 少 而 简练 ， 给 人 一 } 

种 简约 、 时 尚 的 视觉 感受 。 


器] CMYK=0.0.0.0 RGB=255.255,255 

辆 CMYK=48.6.79.0 RGB=153.201.86 
加 CMYK=53.6.86.0RGB=138.195.70 
加 CMYK=51.8.98.0 RGB=147.194.30 


网 页 中 图 形 的 运用 一 一 面 


面 的 面积 较 大 ， 形 态 也 灵活 多 变 。 它 比 点 与 线 更 加 有 具有 吸引 力 。 不 同 的 图 形 能 够 
辣 的 感觉 。 例 如 ， 和 矩形 给 人 一 种 平衡 感 ; 正三 角 给 人 一 种 稳定 感 ; 倒 三 角 给 


人 和 危机 感 ; 圆 形 给 人 温柔 、 和 舒适 的 感觉 。 
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朴实 通常 是 指 一 种 节俭 、 朴 素 的 生活 态度 。 能 够 体现 朴实 的 色彩 都 应 该 是 中 性 色 ， 
它 的 特点 是 中 明度 色彩 基调 ， 没 有 明显 的 色相 对 比 ， 整 体 色调 柔和 、 不 刺激 。 朴 实 的 
配色 虽然 不 够 鲜明 、 刺 激 ， 但 是 它 带 着 岁月 的 积淀 ， 平 淡 而 伟大 。 

相关 词语 : 质朴 、 和 淳厚、 诚恳 、 朴 素 、 俭 约 、 豆 厚 、 古 典 。 

代表 颜色 : 褐色、 灰色、 棕色、 茶色、 咖啡 色 、 米 色 、 青 灰色 。 


| 平 ， 该 网 页 为 中 明度 色彩 基 | 
| 调 ， 灰 褐色 调 的 配色 给 人 一 种 年 代 感 ， | 
与 这 种 民族 风格 相 呼应 。 

| 侠 该 网 页 采用 海报 式 的 布局 方式 ， 

| 画面 中 的 人 物 动态 十 足 ， 引 人 人 胜 。 

| 例 该 网 页 采用 单 色调 的 配色 方案 

| 色调 随 着 位 置 而 变化 。 | 
| 俐 画面 中 ,文字 位 于 画面 中 的 中 心 | 
立 置 ， 有 利于 视觉 的 引导 。 

EU CMYK=48.52.64.1 RGB=154.127.97 | 
页 ;CMYK=27.28,35,0 RGB=199.184.163 | 
CMYK=14.14.17.0 RGB=227,220.210 | 


NN CMYK 


一 个 


ee 


该 网 页 画面 以 灰色 为 主 色调 ， 单 色 
调 的 配色 方案 给 人 一 种 柔和 、 安 静 的 感 
觉 。 该 网 页 的 布局 方式 非常 简约 ， 分 类 | 
清晰 ， 让 访客 一 目 了 然 。 | 


转 CMYK=100.100.100.100 RGB=0.0.0 
国 CMYK=90.83.73.61 RGB=20.28.35 
国 CMYK=63.62.61.9 RGB=111.98.92 
CMYK=31.28.28.0 RGB=187.181.176 


CMYK=0.0.0.0 RGB=255.255.255 
CMYK=14,12.22.0 RGB=228.224.204 
| CMYRK=17.18,30.0 RGB=221.210.183 


Bo 
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创意 的 404 页 面 设计 


404 页 面 是 客户 端 在 浏览 网 页 时 ， 服 务 器 无 法 正常 提供 信息 ， 或 是 服务 器 无 法 回 
应 ， 且 不 知道 原因 时 所 返回 的 页 面 。 当 用 户 浏览 网 页 时 ， 遇 见 404 错 误 页 面 是 非常 令 


人 泪 形 的 ， 一般人 的 第 一 反应 是 天 掉 网 页 。 如 果 提供 一 个 具有 创意 的 错误 页 面 ， 就 可 


404* 


* The page does not exist! 


以 继续 吸引 用 户 浏览 网 页 中 的 其 他 内 容 了 。 
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西川 让 三 朗 商 店 


弓 才 国 


说 到 清新 ， 我 们 能 够 联想 到 什么 ?可 能 是 森林 中 沁人心脾 的 空气 ， 是 记忆 中 那 穿 
色 衬 衫 的 翩翩 少年 ， 或 是 雨 打 梨花 的 早春 。 清 新 仿佛 是 心灵 的 一 方 净土 ， 它 纯净 、 
清澈 ， 不 带 一 丝 杂 质 。 能 够 体现 清新 这 一 视觉 印象 的 大 多 为 冷色 调 ， 颜 色 明 度 高 ， 纯 
度 低 。 在 配色 中 禁忌 使 用 较 深 的 颜色 ， 颜 色 之 间 对 比 效果 要 弱 。 

相关 词语 : 请 更 、 新 颖 、 新 鲜 、 清 澈 、 文 艺 、 干 净 、 舒 适 。 


代表 颜色 :白色 、 淡 青色 、 淡 蓝 色 、 淡 粉色 、 淡 绿色 、 谈 紫 丁 香 色 。 
a LS A i hale cies Wu El ls as ee 
网 | | 俗 的 感觉 ,画面 中 , 整体 颜色 对 比较 弱 ， 
形成 了 一 种 柔和 、 舒 缓 的 视觉 节奏 。 
色 SA | 侠 画 面 中 孕妇 的 形象 与 网 页 标志 相 | 
设 | ”0 1 | 呼应 。 | 
计 | 侠 网 页 中 各 部 分 内 容 条 理 清晰 、 简 | 
手 | 单 易 懂 。 | 
册 ”从 整个 画面 呈现 包围 型 的 布局 方式 ， 


Si _ 很 好 地 将 访客 的 视线 集中 到 了 网 页 中 心 
| 设计 理念 : 通常， 圆 形 或 曲线 是 代 | | 位 置 ， 使 网 页 的 主题 一 目 了 然 。 : 
| 表 女 性 的 ， 代表 着 柔美 、 舒适 、 温柔 。 | CMYK=0.0.0.0 RGB=255,255,255 


| 在 该 网 页 中 ， 都 是 采用 曲线 或 圆 形 作为 | CMYK=14.1.8.0RGB=228.243.241 | 
; 基本 形状 ， 给 人 一 种 柔和 的 美感 。 : CMYK=11.19.13.0 RGB=232.213.212 ; 
| 色彩 点 评 : 这 是 一 个 产 院 的 网 页 设 | 有 CMYK=-13.11.42.0 RGB-234.226.167 | 


CMTYK=8.6.7.0 RGB=239,238,236 


| 计 ， 淡 青色 的 主体 色调 给 人 一 种 清新 脱 | 


| 这 是 一 个 以 茶 为 主题 的 网 页 设计 ， 整 
| 个 画面 以 白色 作为 主 色调 ， 以 绿色 为 点 缀 
| 色 ， 整 体 上 给 人 一 种 清新 、 健 康 的 感觉 。 


”该 网 页 为 高 明度 的 灰色 调配 色 ， 整 | 
体 给 人 一 种 温和 、 谦 虚 的 感觉 。 在 这 种 | 
| 色调 的 作用 下 ， 标 题 中 的 青色 文字 变 得 | 
| 画面 中 文字 也 为 绿色 , 来 自 于 茶叶 的 颜色 ，; | 非常 抢眼 。 而 且 高 明度 的 灰色 调 搭配 青 | 
| 与 整个 网 页 的 风格 及 主题 相应 。 色 , 也 给 人 一 种 清新 、 淡雅 的 视觉 感受 。 


| 国 CMYK=83.58.84.29 RGB=44.81.58 
| 国 CMYK=-69.42.82.2 RGB-98.131.78 国 CMYK=66.18.3.0 RGB=76.177.233 
| 国 CMYK-70.38.98.1 RGB-95.136.55 CMYK=11,15.13.0 RGB=232.221,218 


仿 | DCMYK=0.0.0.0 RGB=255.255.255 ; | 站 CMYRK=7.4.8.0 RGB=242.243.238 | 


转 CMYK=75.68.65.26 RGB=73.73.73 


网 页 设计 的 禁忌 


@* 禁忌 过 度 的 创意 


网 页 设计 中 不 能 缺乏 创意 ， 但 是 过 度 的 创意 就 会 让 用 户 产生 浏览 障碍 。 而 且 ， 当 
涉及 到 交互 设计 的 时 候 ， 过 度 的 创意 会 对 网 站 和 产品 产生 不 利 的 影响 。 


@ 禁忌 末 乱 无 章 


网 页 中 复杂 多 变 的 表格 、 文 字 会 破坏 整个 网 页 的 风格 。 用 户 可 能 会 迷失 在 大 量 的 
信息 中 ， 所 以 ， 在 网 页 设计 中 ， 要 去 繁 就 简 ， 保 持 清 爽 的 设计 。 


3 


适当 的 对 比 能 够 激发 视觉 矛盾 ， 构 建 视 觉 层次 ， 也 是 吸引 访客 注意 的 方法 。 画 面 
效果 对 比较 弱 ， 就 会 让 画面 失去 重点 。 网 页 中 的 对 比 包 括 颜色 、 尺 寸 、 形 状 等 因素 。 


5 


在 一 个 网 页 中 ， 要 以 一 种 颜色 作为 主 色 调 ， 整 个 画面 颜色 控制 在 三 种 到 五 种 颜色 
之 内 。 而 且 不 能 单纯 凭借 自己 的 喜好 去 配色 ， 还 要 考虑 产品 本 身 的 定位 ， 以 及 标准 色 
和 整体 的 色调 ， 要 充分 地 考虑 用 户 使 用 时 的 感受 。 


网 页 设计 赏析 


ES 
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如 吕 厌 尖 要 混 趴 司 司 需 9 游 


击 侣 淋 李 疯 东 加 日. 


欢乐 是 一 种 幸福 、 开 心 的 感觉 ， 要 从 颜色 上 去 表现 欢乐 ， 要 从 颜色 的 纯度 、 色 相 
和 对 比 三 个 方面 进行 考虑 。 在 选择 颜色 时 ， 高 纯度 的 颜色 更 容易 表现 欢乐 的 感觉 ; 在 
色相 的 选择 上 ， 尽 量 选 择 鲜艳 的 颜色 ， 少 选择 黑色 、 深 褐色 、 藏 蓝 色 等 颜色 ;暖色 调 
相对 于 冷色 调 而 言 ， 更 容易 让 人 觉得 欢乐 ; 在 配色 方案 的 选择 上 ， 可 以 选择 对 比 色 或 
互补 色 的 配色 方案 ， 利 用 色相 、 纯 度 、 辐 积 入 潜 二 加 全 外 的 对 比 ， 形成 更 加 
强烈 的 视觉 冲击 力 。 亡国 了 


相关 词语 : 兴 、 高兴、 喜悦、 积极、 Denaonc 
热情 。 : jc 


代表 颜色 : 黄色、 橙色、 青色、 红色 。 
应 用 行业 : 儿童 类 、 教 育 类 、 设 计 类 、 


该 网 页 通过 图 像 表 现 欢乐 的 感觉 , 可 | 
以 看 到 画面 中 人 物 笑容 刊 美 ， 非 常 具有 感 | 
染 力 。 画 面 中 采用 颜色 过 渡 的 方法 将 视线 | 
集中 在 人 物 身上 ， 从 淡 青 色 到 蓝 色 的 这 种 | | 
配色 给 人 一 种 神秘 、 妖 娆 的 感觉 。 | 

| | 

国 CMYK=69.94.62.39 RGB=80.32.57 

国 CMYK=44.100.100.14 RGB=154.12.0 

国 CMYK=60.74.78.30 RGB=103.66.53 
CMSYK=25.2.2.0 RGB=202,233,250 


| 页 ， 矢 量 插画 风格 的 设计 给 人 一 种 全 新 
| 的 视觉 感受 。 画 面 中 将 景区 、 旅 游 特色 
| 都 以 插画 的 形式 展现 出 来 ， 给 人 一 种 丰 
| 富 、 活 力 、 欢 乐 的 感觉 。 

| 色彩 点 评 :该 网 页 为 冷色 调 ， 青 色 的 
| 主体 色 给 人 一 种 清凉 、 年轻、 活力 的 感觉 。 
| 整个 画面 颅 色 非 常 丰富 ,动感 十 足 。 

| 人 乡 画 面 中 黄色 和 绿色 为 点 级 色 ， 
| 这 两 种 颜色 一 个 是 对 比 色 ， 一 个 是 类 似 
| 色 , 所 以 整个 画面 中 颜色 既 有 对 比 关系 ， 
| 又 有 平衡 关系 。 
| 人 鲜 网 页 中 虽然 图 案 内 容 非常 丰富 
| 但 是 中 央 的 两 个 大 字 非 常 醒目 ， 直 接 突 
| 出 了 画面 所 要 表达 的 主题 。 

| 丛 该 网 页 的 导航 栏 也 很 有 趣味 性 ， 利 
摘 i 色 及 图 标 进行 区 别 ， 增 强 了 用 户 体验 。 


国 CMYK=59.66.92.23 RGB=111.83.45 
~ CMYK=6.15.36.0 RGB=246.224.176 
CMYKR=17.2.6.0 RGB=221.240.244 
园 CMYK=60.11.99.0 RGB=117.182.41 
国 CMYK=8.19.76.0 RGB=249.214.72 
加 CMYK=49.40.38.0 RGB=147.147.147 


| EU CMYK=68.0.46.0 RGB=6.206.173 
| 和 CMYK=3.31.90.0 RGB=255.194.1 
| I CMYK=85.42.100.5 RGB=14.119.0 
: EU CMYK=64.24.23.0 RGB=99.167.191 


a 


图 像 在 网 页 设计 中 的 作用 

图 像 作 为 一 种 “国际 语言 ”, 它 更 容易 被 人 类 理解 和 接受 。 在 这 样 一 个 读 图 时 代 中 ， 
图 像 更 容易 表达 情绪 ， 也 更 容易 让 用 户 铭记 。 图 像 在 网 页 设计 中 具有 以 下 几 点 作用 。 
(1 ) 美化 页 面 。 如 果 网 页 中 只 有 文字 ， 那 么 它 一 定 会 非常 单调 。 在 网 页 中 添加 图 | 
案 ， 则 对 网 页 内 容 的 协调 和 美化 起 着 积极 的 作用 。 
(2 ) 强化 表现 。 图 形 区 别 于 文字 ， 它 可 以 通过 视觉 上 的 形 、 色 来 表达 情感 ， 从 而 
激发 访客 无 限 的 想象 力 ， 从 而 能 进一步 地 强化 主体 、 加 深 印 象 。 而 且 图 形 还 具有 说 明 
的 作用 ， 它 能 让 抽象 的 内 容 变 得 具象 。 
(3 ) 增加 趣味 性 。 如 果 在 画面 文字 较 多 的 情况 下 ， 在 画面 中 添加 图 案 ， 可 以 增加 
画面 的 趣味 性 ， 减 轻 阅 读 的 压迫 感 ， 提 高 阅读 的 兴 

(4 ) 传递 信息 。 图 像 是 传递 信息 的 重要 手段 ， 相 对 于 文字 而 言 ， 图 像 传 递 信 息 的 
接 、 更 形象 。 


方式 更 快 、 更 


小 妇 沽 落 号 染 四 喇 黑 届 9 潞 


落下 后 半 光世 曙 胃 


N= 


河上 


温柔 通常 是 形容 一 个 人 的 性 情 温顺 体贴 ， 不 骄 不 躁 。 能 够 体现 温柔 的 颜色 通常 
色 对 比较 弱 ， 颜 色 的 力量 感 也 较 弱 ， 给 人 一 种 柔软 、 温 和 的 感觉。 

相关 词语 : 温和 、 侨 雅 、 轻 柔 、 优 雅 、 柔 和、 放松 。 

代表 颜色 ， 米 白色 、 象 牙 色 、 淡 黄色 、 淡 粉色 。 

“应 用 行业 : 母 婴 类 、 美 妆 类 、 服 饰 类 、 饮 品类 、 购 物 类 。 
] 调 ， 整 体 颜色 温柔 、 素 雅 。 画面 中 的 红 | 
| 色 带 动 了 气氛 。 

命 红色 是 代表 女性 的 颜色 ， 在 该 网 | 
页 中 ， 红 色 的 Togo 和 导航 栏 在 颜色 对 ， 
| 比 的 作用 下 格外 突出 。 

全 画面 中 ,手写 体 的 文字 让 画 看 | 
起来 更 加 浪 浊 、 文艺 。 
侈 画面 中 ， 网 页 Logo 大 而 显眼 ， | 


时 二 i 这 样 的 设计 可 以 增加 网 页 的 识别 性 。 
| | 网 页 设计 ， 画面 中 通过 图 像 去 对 网 页 的 | | CMYK=4.8,21.0 RGB=250.239.212 


主题 进行 描述 ， 其 他 的 文字 部 分 简单 ; | | EE CMYK=9.87.81.0 RGB-232.66.49 
| 易 懂 。 | ICMYK=l720440RGB-224206154 
评 : 该 网 页 为 高 明度 色彩 基 | | CM- 50.85.92.22 RGB=132,57.40_ 


加 


HAPPY arn's 
382>mz=kbo 


该 网 页 为 高 明度 的 灰色 调 ， 五 不 画 ] | | 
| 面 颜色 对 比较 弱 ， 给 人 一 种 温柔 、 朴 素 | bl 大 本 作为 最, 伯 人 一季 民 、 


| 的 感觉 。 画 面 中 的 其 他 颅 色 都 具有 灰色 | 大方 的 视觉 感受 。 该 图 像 整体 色调 经 柔 ， 
| 的 色彩 ， 画 面色 调 协调 、 统 一 。 | | 高 明度 、 低 纯度 的 配色 方法 让 人 体会 到 | 


人 | i 很 温柔 、 和 易 的 感觉 。 | 
| 国 cMYK=28.23.1.0RGB-195.195.228 | EE | 


| CMYK=16.23.26.0 RGB=223.202.185 | | CMYK=21.29.44.0 RGB=214.187.148 
| 国 cCMYK=34.18.11.0 RGB=181.198.216 : ;大 CMYK=10,38,36.0 RGB=234.178.155 
| 国 CMYK=31.28.48.0 RGB=193.181.140 | 上 夸 CMYK=-29.24.24.0 RGB-192.189.186 
| CMYK=10,28.23.0 RGB-134.197.187 ‘CMYEKS12.11.14.0RGB=230.227.219 

CMYK=8.8.9.0 RGB=239.235.232 | | CMYK=20.19.27.0 RGB=213,206.188 


网 站 首页 设计 
网 站 首页 是 一 个 网 站 的 人 口 网 页 ， 是 整个 网 站 的 门面 。 网 站 首页 的 设计 分 为 图 像 
展示 型 和 信息 罗列 型 。 


@ ita 


图 像 展示 型 的 网 站 首页 文字 信息 较 少 ， 用 图 像 向 访客 展示 企业 的 形象 、 商 品 、 服 
务 等 信息 。 网 站 的 首页 设计 要 有 了 明确 的 主导 型 ， 通 过 艺术 造型 、 设 计 布局 和 色彩 为 访 
客 留 下 深刻 的 印象 ， 并 引导 他 们 继续 留 在 网 站 中 浏览 网 页 。 


ss 


信息 罗列 型 是 在 首页 中 就 罗列 出 网 站 的 主要 内 容 分 类 、 重 点 信息 、 网 站 导航 、 公 
司 信息 等 ， 画 面 中 内 容 丰富 ， 所 以 在 设计 过 程 中 ， 要 避免 杂乱 无 章 。 
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代表 颜色 : 


如 果 要 通过 颜色 去 表现 女性 的 成 熟 ， 


人 a 褐色 、 


可 以 通过 暗 红色 、 深 紫色 间 


行 表达 ; 如 果 要 
表现 男性 的 成 熟 , 可 以 通过 深 灰 、 藏 蓝 色 的 光 颜 色 进 行 表达 ; 如 果 要 表现 秋天 的 成 熟 ， 


可 以 使 用 椰 褐色 或 柿子 检 色 。 
相关 词语 : 稳重 、 老 练 、 沉 稳 、 内 敛 。 


串 州 手 扎 只 型 昼 悦 


| 个 部 分 ， 左 侧 为 文字 ， 右 侧 为 商品 。 这 
样 井 站 有 条 的 布局 方式 ， 能 够 给 人 留 下 


| 非常 深刻 而 又 友好 的 视 


| 一 种 理智 、 
| 熟 比 较 死 板 ， 


| 地 突出 ， 让 画 


酒 红色 。 
经 济 类 、 政 治 类 、 法 和 


| 这 是 一 个 男装 的 网 页 设 | 
| 计 , 深 赤色 代表 男性 坚强 、 刚 毅 的 个 性 ， | 
| 黄 褐色 代表 深沉 、 优 雅 的 品行 。 | 
| 侠 灰 色 是 很 具有 包容 性 的 颜色 , 在 | 
| 画面 中 , 灰色 与 黄 神色 的 配搭 非常 自然 ， | 
| 毫 无 违 和 感 。 
| 例 画 面 中 的 模特 非常 帅气 ， 
i 吸引 力 。 
| ”给 网 页 中 以 直线 、 和 矩形 进行 装饰 ， 


很 具有 | 


觉 印 象 。 


温和 、 成 熟 的 视觉 印象 。 成 


红色 的 导航 栏 就 显得 格外 


A 


面 变 得 更 加 生动 、 有 趣 。 


| 转 CMYK=13.99.100.0 RGB=226.2.18 

| CMYK=0.0,0.0 RGB=255.255.255 
CMYK=7.5,5.0 RGB=240.240.240 
CMYK=24.18.18.0 RGB=203.203.203 


合 男性 的 性 格 特点 及 审美 要 求 。 
TCMYK=84.79.78.63 RGB=29.29.29 
CNMYK 一 75.69.66.29 RGB=70.70.70 | 
| EE CMYK=42.51,78,1 RGB=168.132.75 | 
| CMYK=16.12.12.0 RGB=220.220.220 | 


作为 一 种 无 色彩 ， 己 的 视觉 感 : 
非常 的 稳定 、 厚 重 ， 有 一 定 的 力量 感 。 

网 页 以 灰色 为 主 色调 , 整个 画面 布局 简 身 
几 处 有 彩色 的 图 案 更 是 显得 落落 大 方 。 


转 CMYK=40.87.62.1 RGB=173.65.81 
国 CMYK=55.44.86.1 RGB=138.137.67 
加 CMYK=26.50.33.0 RGB=201.147.150 
CMYK=19.25.38.0 RGB=217.195.162 
国 CMYK=72.69.67.28 RGB=78.71.69 


EE 


所 谓 风格 统一 ， 就 是 访客 在 浏览 同一 网 站 中 的 不 同 网 页 时 ， 风 格 看 上 去 大 体 是 一 
致 的 ， 不 会 在 网 页 跳 转 过 程 中 产生 一 种 “ 走 错 房间 ”的 迷茫 感觉 。 
风格 统一 的 网 页 设计 很 容易 在 浏览 者 头脑 中 形成 一 种 连续 的 记忆 ， 从 而 加 深 访客 


对 网 页 的 印象 。 我 们 可 以 通过 色彩 、 视 觉 元 素 、 字 体 、 尺 寸 这 几 个 方面 去 保证 一 个 网 第 
站 的 视觉 统一 。 9 


(1 ) 色彩 统一 。 在 一 个 网 站 中 ， 尽 量 选择 同一 主 色调 ， 配 色 方 案 要 相同 。 
(2) 视觉 元 素 统一 。 例 如 图 标 、 按 钮 的 风格 统一 ，Logo 和 导航 的 位 置 要 统 网 


一 每 


等 。 页 
( 3 ) 字体 统一 。 在 网 页 中 ， 要 选择 合适 的 字体 ， 根 据 信息 的 层级 去 设置 相应 的 字 色 
体 、 字 号 。 本 
(4 ) 尺寸 统一 。 例 如 网 页 中 的 内 容 、 图 像 的 大 小 、 每 个 元 素 之 间 的 间距 的 统一 。 2 
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串 州 平 总 薄型 昼 悦 


未 品 各 半 节 六 曙 芝 


音乐 狂欢 夜 活动 的 网 页 


设计 


6.15.1 设计 说 明 


效果 说 明 : 


该 网 页 为 低 明 度 色彩 
基调 ， 以 低 明 度 的 紫色 为 


主 色调 ， 通 过 明度 的 变 


E23 


页 的 主 色调 ， 整 体 上 经 


一 种 神秘 、 Met 


觉 感 受 。 网 页 中 以 洋红 色 
为 点 缀 色 ， 紫 色 和 洋红 色 


为 类 似 色 ， 两 种 颜色 搭配 
在 一 起 ， 整 体 效 果 和 谐 、 
透露 着 激情 和 时 沿 


商家 要 求 : 


营造 层次 感 。 以 紫 ee 


化 


C 


CRYSTAL 全 


CLUBSUPERPASS 


多 颜色 具有 感染 力 ， 能 够 突出 音乐 、 狂 欢 这 样 的 主题 。 


令 网 页 操作 简单 ， 


令 网 页 布局 要 求 现代 、 简 约 ， 


方便 用 户 使 用 。 
内 容 翔 实 ， 言 简 意 凡 。 


令 网 页 层次 分 明 ， 
解决 方案 : 


主要 信息 突出 。 


令 网 页 采用 无 限 深 动 的 方式 ， 


去 了 繁杂 的 点 击 , 方便 


3 户 操 作 。 


令 网 页 以 紫色 为 


令 采用 通栏 式 的 网 页 布局 。 
令 网 页 中 图 文 并 蕊 ， 内 容 


理解 。 


主 色调 ,搭配 洋 红色 和 多 彩 的 线条 ， 


清晰， 


用 户 使 用 鼠标 中 轮 就 可 浏览 网 页 中 的 大 致 内 容 ， 省 


给 人 一 种 年 轻 、 活 力 的 


非常 易 了 


F 访 客 的 阅读 和 


网 页 的 视觉 印象 会 随 着 颜色 的 改变 而 改 | 
变 ， 在 该 网 页 中 ， 紫 色 搭配 洋红 色 ， 给 人 ， 
一 种 艳丽 、 绚 丽 的 视觉 感受 。 这 样 的 色彩 | 


感觉 更 受 女性 的 青睐 。 


该 作品 在 版 式 上 有 轻微 的 改动 ， 在 中 间 和 | 
下 方 的 版 面 中 ， 添 加 了 和 白色 的 边框 ， 这 样 


可 以 让 视线 更 加 集中 。 


该 网 页 采用 同类 色 的 配色 方案 ， 在 整体 效 | 


果 和 谐 的 前 提 下 ， 又 充满 了 无 穷 的 变化 。 


| @ 该 网 页 整体 的 色彩 轻柔 ， 淡 粉色 和 淡 青色 | 
， 。 搭配 在 一 起 ， 两 种 颜色 在 明度 、 色 相 上 的 ， 


对 比 都 比较 弱 ， 给 人 一 种 轻柔 的 感觉 。 


| @ 网 页 图 片 色彩 艳丽 ， 背 景 颜色 则 轻柔 两 


种 感觉 形成 强烈 的 对 比 效 果 。 


| @ 通常 高 明度 、 低 纯度 的 色彩 都 能 够 形成 轻 | 
| 和 柔 、 温 柔 的 感觉 。 这 种 色调 应 用 在 音乐 主 | 
体 的 网 页 中 ， 是 一 种 另 如 中 径 的 做 法 ,给 | 


人 一 种 别开生面 的 感觉 。 


小 呈 沽 落 号 染 中 喇 屠 贡 9 商 


东 豆 疆 闻 区 坊 曙 内- 


囊 州 半 交 中 型 关于 


该 网 页 采用 黑色 搭配 白色 的 配色 方式 ， 黑 | 
与 白 这 样 明度 对 比 最 强烈 的 颜色 搭配 在 ; 
一 起 ， 给 人 一 种 鲜明 、 激 烈 的 视觉 感受 。 | 
单纯 的 黑色 与 白色 的 搭配 会 显得 死板 ,在 ; 
这 里 ， 网 页 使 用 了 紫色 调 的 图 片 作为 辅助 ; 
色 ， 这 样 的 设计 既 能 丰富 画面 的 颜色 ， 又 : 
营造 了 欢乐 、 动 感 的 氛围 。 | 
在 该 网 站 中 ， 黑 色 代表 炫 酷 ， 白 色 代 表 沉 ; 
静 , 紫色 代表 活跃 , 三 种 颜色 搭配 在 一 起 ，; 
整体 上 给 人 一 种 时 尚 感 和 现代 感 。 : 


DOLORES 
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该 网 页 以 红色 为 主 色调 ， 整 体 颜色 没有 过 : 
于 强烈 的 对 比 ， 整 个 网 页 给 人 一 种 妩媚 、 ; 
妖娆 之 感 。 : 
在 第 二 个 版 面 中 , 网 页 添加 了 放射 状 背景 ，; 
采用 这 样 的 设计 ， 可 以 让 前 景 中 的 内 容 更 ; 
加 突出 。 | 
在 该 网 页 中 ， 添 加 了 中 黄色 作为 辅助 色 ， ; 
它 与 红色 为 对 比 色 ， 形 成 对 比 ， 让 整个 画 ; 
面 的 颜色 更 加 鲜 活 、 出 众 。 | 


其 他 音乐 网 页 不 同 视觉 感受 解析 
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AnaltaaLE waw 


PB> Goosle play 


amazoncom 


该 网 站 为 低 明 度 色彩 基调 ， 


以 黑色 搭配 和 白色， 给 人 很 
强 的 视觉 冲击 力 。 网 页 
Banner 采用 半 透 明 的 处 理 
方式 ， 形 成 了 该 网 页 中 独 
树 一 帜 的 亮点 


这 是 一 个 女子 组 合 的 个 人 
网 站 ， 网 页 整体 以 洋红 色 
作为 主 色 调 ， 搭 配 明黄 色 
作为 点 缀 色 ， 整 体 上 给 人 
一 种 既 可 爱 、 甜 美 ， 又 不 
乏 青春 活力 的 感受 


该 网 页 走 的 是 干脆 、 时 尚 
的 风格 ， 在 白色 背景 的 衬 
托 下 ， 中 景 中 的 人 物 显得 
更 加 鲜 活 。 为 了 避免 网 页 
的 平庸 之 感 ， 前 景 中 多 彩 
的 艺术 字 起 到 了 锦上添花 
的 作用 


该 网 页 为 女 歌 手 的 个 人 网 
站 , 网 站 以 黑色 搭配 红色 ， 
整体 上 传达 出 一 种 性 感 、 
妩媚 的 格调 


w 


邵 吕 证 省 要 涉 吕 司 司 十 9 溃 


everythi 


BE EEAILRY. 


很 多 网 页 设计 人 员 都 有 这 样 的 烦恼 : 怎样 才能 成 为 一 个 优秀 的 设计 师 ? 网 页 设计 有 
没有 什么 诀窍 ? 虽然 设计 没有 捷径 可 言 ， 但 是 ， 凡 事 需 要 讲究 方法 ， 本 章 就 来 介绍 一 下 
网 页 设计 中 的 技巧 


LT Hd 到 EA。 各 sa 


了 | SROP 
YF| TRUST 
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“The Crop Trust is an international orgenization working 
to safeguard crop diversity, forever.” 


MARIE HAGA 
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9 网 页 文字 的 排版 技巧 


排版 是 为 了 优化 信息 传递 而 进 


版 的 合理 和 精巧 ， 网 页 设计 吕 


击 否 淋 用 遍 荡 燥 日、 


@) aa 


文字 之 间 的 距离 不 会 越过 
两 个 字 的 高 度 ， 适 中 的 行 
间距 在 阅读 中 会 有 一 种 轻 
松 、 和 舒适 的 感觉 


囊 州 于 半路 型 关于 


@ sx 


在 文字 过 多 的 情况 下 ， 通 常设 计 者 会 进行 分 栏 ， 


要 花 时 间 去 分 辨 。 而 行 间距 太 宽 时 ， 


文字 排版 效 史 


VIMEO PLAYER 


VIMEO PLAYER 


行 的 排列 组 合 ， 在 海报 设计 、 版 式 设 
FP 也 不 例外 。 网 页 中 ， 
页 的 设计 水 平和 可 阅读 性 ， 它 既是 一 门 艺 术 ， 
精度 和 细节 ， 甚 至 连 很 小 的 细节 都 不 容 忽 视 。 


的 好 坏 


计 中 都 讲求 排 


直接 影响 到 网 


也 是 一 种 技巧 。 好 的 排版 非常 注重 视觉 


行 间距 是 指 两 行文 字 之 间 的 距离 。 当 行 间 距 太 窗 时 ， 文 字 会 显得 拥挤 ， 阅 读 时 需 
阅读 的 连贯 性 就 会 受到 干扰 。 一 般 情 况 下 ， 两 行 


VIMEO PLAYER 


ead More 


* 行 间距 太 府 


“* 行 间 焉 太 宣 


不 停 地 来 回 扫 视 产生 的 错 行 现象 ， 从 而 提高 阅读 速度 和 改善 阅读 感受 。 


if 


无 论 是 活 泌 的 、 新 潮 
的 、 严 肃 的 还 是 文艺 风格 
的 网 页 设计 ， 都 有 一 种 很 
明确 的 对 齐 方式 ， 这 样 才 
能 实现 一 个 网 页 的 规范 性 。 
通常 情况 下 ， 建 议 在 页 面 
上 只 使 用 一 种 文本 对 齐 方 
式 , 且 尽量 避免 两 端 对 齐 。 


一 


Xhy TAU 


“* 行 间距 适中 


这 样 就 可 以 避免 阅读 过 程 中 眼睛 


@) tarsus 


随 着 科技 的 发 展 ， 人 们 的 阅读 习惯 也 发 生 着 变化 ， 现 代 人 更 喜欢 看 图 而 非 文 字 ， 网 
页 中 大 量 的 文字 只 会 让 人 厌烦 ， 设 计 过 程 中 ， 应 尽 可 能 地 避免 使 用 大 量 文字 。 若 要 避免 


Nous sommes une 


baskeaGeneve， sui 


正 所 谓 “ 良 好 的 开端 
是 成 功 的 一 半 ”， 在 网 站 
设计 上 也 是 如 此 。 企 业 网 
的 首页 奠定 了 访客 对 企 
的 第 一 印象 ,一 个 专业 、 
良 、 个 性 的 网 站 首页 ， 
会 给 访客 留 下 良好 的 印象 ， 
并 留 住 访客 继续 访问 该 网 
站 。 反 之 ， 一 个 粗制滥造 
的 首页 设计 则 会 让 访客 对 
该 企业 的 产品 、 服 务 质 疑 ， 
从 而 对 该 企业 失去 兴趣 。 
优秀 的 网 站 首页 设计 通 
常会 体现 出 网 站 的 整体 风 
格 和 企业 的 经 营 理念 ， 还 
要 个 性 鲜明 ， 足 以 吸引 访 
客 的 注意 。 在 对 企业 网 站 
首页 设计 的 过 程 中 ， 需 要 
设计 人 员 仔 细 阅 读 企业 的 
CI 手册， 熟悉 企业 标志 、 Ensino fundamental 
吉祥 物 、 字 体 及 用 色 标 准 ， , 
让 这 些 元 素 在 网 站 的 首页 AMAZE WE AMAZE EXTREME 
中 体现 出 来 。 ANGRA DOB'RET = 一 SAO 


》 痕 层 革 


amaze, 


DESCUBRA O DESTINO IDEAL PARA VOCE E SUA TURMA 


Ensino Medio 


po 
(af 
和 


座 总 手 涉 司 司 届 人 站 


如 何 把 握 网 页 的 一 致 性 


在 一 个 网 站 中 会 包含 多 个 页 面 ， 网 页 的 一 致 性 是 设计 要 点 之 一 。 具 有 一 致 性 的 网 
页 能 够 帮助 企业 推广 品牌 、 清 晰 传递 信息 ， 使 得 消费 者 对 企业 产生 信任 感 ， 获 得 良好 
的 用 户 体验 。 可 以 通过 以 下 几 个 方面 实现 网 页 的 一 致 性 。 


蝎 风格 的 一 臻 性 


每 个 网 站 都 有 属于 自己 的 风格 ， 企 业 网 站 会 选择 理智 、 严 肃 的 风格 ， 个 人 网 站 会 
选择 个 性 、 时 尚 的 风格 。 统 一 的 网 页 风格 能 够 让 整个 网 站 实现 更 好 的 一 致 性 。 


ET 


串 州 圭 扎 只 型 导 司 


| 
| 


Ga 色彩 的 一 致 性 


访客 对 网 页 颜色 的 感受 要 比 网 页 布局 更 加 敏感 ， 统 一 的 颜色 能 体现 出 网 页 的 一 致 
性 。 尤其 是 导航 栏 的 颜色 统一 ， 更 能 体现 出 网 页 色彩 的 一 致 性 。 


和 @ 该 网 站 的 网 页 不 仅 在 表现 形式 上 非常 相似 , 在 色调 上 也 非常 统一 。 网 页 以 白色 作为 背景 色 ， 
以 深 绿色 为 主 色 ， 在 图 汪 天 太 同 渤 近 上 也 同 村 渤 汪 证 已 加 训 ， 整个 画面 效果 非常 和 谐 。 ; 


@ amen wt 


导航 栏 是 整个 网 站 的 重要 组 成 部 分 ， 是 每 个 用 户 都 会 注意 到 、 使 用 到 的 部 分 。 整 
个 网 站 导航 栏 的 位 置 、 形 式 上 的 一 致 ， 同 样 能 够 让 网 页 产生 关联 。 


第 

所 

| = | 章 
1 @ 在 这 两 个 网 页 中 ， 页 面 内 容 虽 然 发 生 了 变化 ， 但 是 网 页 顶部 导航 的 颜色 、 位 置 、 大 体内 | 网 
| 容 都 没有 发 生变 t 页 
设 

人 @ alist 计 
在 网 页 中 都 会 具有 一 i a 业 标 志 、 商 品 标志 、 象 征 图 形 等 ， 这 籍 


给 访客 留 下 深刻 的 印象 。 


SIMITAR ORYX 7 KEMP'S AIDLEY TURTLE 


| @ 在 这 两 个 网 页 中 ， 虽 然 图 像 的 内 容 和 背景 颜色 发 生 了 变化 ， 但 是 文字 、 按 钮 等 元 素 的 位 | 
置 都 没有 变化 ， 在 访客 浏览 的 过 程 中 ， 很 容易 形成 联想 。 


Sd 


图 形 或 图 像 也 是 很 容易 吸引 人 注意 的 元 素 ， 在 网 页 中 反复 出 现 某 个 图 形 或 图 像 都 
人 从 而 实现 网 页 一 致 性 的 目的 。 


| @ 在 该 网 页 中 ， 飞 溅 效果 的 图 形 是 一 大 亮点 ， 在 其 他 页 面 中 也 能 够 看 到 这 些 图 形 的 存在 ， | 
| 这 就 很 好 地 体现 了 网 页 之 间 的 连 叶 性 和 一 致 性 。 


© 背景 的 一 至 性 


景 的 处 理 包括 背 景 图 片 和 背景 色 两 种 。 一般 情 况 下 , 背景 所 占 页 面 的 面积 较 大 ， 
统一 的 背景 更 容易 商定 网 页 的 风格 ， 保 证 网 站 的 一 致 性 。 cc 
\ 


击 要 淋 闻 遍 荡 娄 日、 


网 站 首页 是 设计 的 重点 ， 它 需要 在 最 短 的 时 间 内 引起 访客 的 注意 。 网 页 设计 离 不 
开 文 字 ， 在 本 节 中 ， 就 来 讲解 首页 中 的 文字 处 理 技巧 。 


@ 加 强 对 比 


有 对 比 才 会 有 突出 ， 在 对 文字 和 图 像 进 行 处 理 时 ， 一 方面 要 加 强 文字 与 图 像 的 对 
比 ， 另 一 方面 ， 要 加 强 文 字 与 文字 之 间 的 对 比 。 在 设计 中 ， 文 字 与 背景 之 间 的 色彩 要 保 
户 能 看 得 清楚 ， 例 如 ， 当 以 暗色 作为 背景 颜色 时 ， 就 应 该 以 白色 或 浅 色 作为 文字 的 
这 样 文字 才能 凸显 出 来 。 文 字 与 文字 之 间 也 要 形成 对 比 ， 因 为 所 要 表达 的 信息 是 


囊 州 半 商 中型 淹 避 


二 /二 /oFVKUEUEE 启 援 (vt 地 


| 文字 的 背景 为 中 明度 色彩 基调 ， 在 这 样 的 背 | 该 网 页 中 ， 标 题 文字 与 副标题 文字 的 字号 相 ; 
| 景 颜色 对 比 之 下 ,白色 的 文字 就 显得 格外 ; 差 很 大 ， 在 这 样 的 对 比 之 下 ， 标 题 文字 非常 
站。 和 委 有 SB 力 -| 


多 YF 5s 
文字 与 图 案 相 结合 ， 使 它们 成 为 一 个 整体 ， 这 样 既 能 保证 文字 信息 的 传递 ， 又 不 
三 站 用 六 


@ 党 着 视觉 流向 菲 布 
利用 时 间 的 流动 去 引导 人 的 视线 是 一 种 很 科学 、 实 用 的 方法 ， 它 让 文字 和 图 片 发 


逻辑 关系 ， 两 者 相辅相成 ， 访 客 既 阅读 了 文字 ， 也 观察 了 图 片 。 


| 网 页 中 人 物 的 视线 向 左 移动 ， 所 以 文字 的 位 | 
| 置 在 人 物 的 左 侧 ， 有 视觉 引导 的 作用 。 


@ tvs 


在 设计 中 ， 有 一 种 观点 叫 作 “ 少 即 是 多 ”， 这 充分 证 明了 简洁 也 是 一 种 非常 有 效 
的 设计 手段 。 太 多 花哨 的 内 容 ， 很 容 让 访客 无 所 适 从 ， 那 么 简化 的 文字 搭配 上 简约 的 


.该 作 品 的 整体 风格 非常 简洁 ， 简 单 易 懂 的 文 | 
| 字 能 够 在 瞬间 吸引 人 们 的 眼球 , 并 留 下 深刻 | 


网 页 导航 是 指 通过 技术 手段 ， 为 网 页 的 访问 者 提供 一 定 的 途径 ， 使 其 可 以 方便 地 
访问 到 所 需 的 内 容 。 它 就 像 指示 牌 一 样 ， 告 诉 访客 当前 在 哪里 ， 将 要 到 哪里 。 网 页 导 
航 通常 位 于 网 站 的 Banner 下 面 或 网 页 的 项 部， 也 有 位 于 网 页 侧面 或 底部 的 。 


@ rns sms 


这 是 一 种 比较 常见 的 导航 栏 ， 它 位 垂直 导航 栏 也 是 一 种 常见 的 导航 方 
于 网 页 的 顶部 ,或 者 位 于 网 站 的 Banner “” 式 ， 它 位 于 页 面 的 左 侧 或 右 侧 ， 在 设计 中 
下 面 。 需要 配合 整个 页 面 的 布局 。 


Bo 
HA 


讨 总 壮 涉 司 司 需 L 溃 


@ fsn 


导航 栏 位 于 网 页 底部 的 做 法 并 不 多 
见 ， 通 常 ， 深 动 式 的 网 页 会 采用 这 样 的 做 
法 。 如 果 导 航 栏 位 于 底部 ， 那 么 最 好 让 其 


始终 位 于 底部 ， 这 样 可 以 避免 用 户 迷 失 。 


@ sn 


巧妙 地 使 用 动画 导航 能 为 整个 页 面 增 
添 光彩 ， 还 能 带 来 独特 的 视觉 体验 ， 给 用 
户 意 外 的 惊喜 。 但 是 ， 动 画 导航 不 宜 做 得 


| 过 于 复杂 ， 要 以 用 户 体验 作为 出 发 点 ， 在 
配 方便 快捷 之 余 ， 做 到 精益 求 精 。 

色 @ 3 

; 滑 出 菜单 。 

人 @ Htsman 

手 滑 出 菜单 是 当 光标 移动 到 指定 位 置 后 | | 
册 会 显示 出 隐藏 着 的 菜单 ， 这 种 响应 式 的 导 卡片 式 导航 对 每 个 部 分 进行 分 类 ， 清 


航 可 以 给 用 户 一 种 非常 愉悦 的 体验 , 而且” 晰 直观 ， 简 单 大 方 。 一 般 情况 下 ， 卡 片 式 


打开 网 页 后 ， 访 客 先 看 到 的 是 网 页 中 的 主 ”导航 都 会 采用 图 文 结合 的 方式 进行 组 合 ， 
要 内 容 ， 而 不 是 导航 栏 。 利用 图 形 让 导航 变 得 更 加 直观 。 


网 页 Banner 的 构图 技巧 


网 页 Banner 是 指 网 页 中 的 横幅 广告 ， 网 页 Banner 的 设计 要 能 够 形象 鲜明 地 表达 
出 最 主要 的 情感 思想 或 宣传 中 心 。Banner 所 占 的 面积 在 整个 网 页 中 是 很 有 限 的， 巧妙 
的 构图 能 够 让 它 引起 访客 的 注意 , 产生 点 击 的 欲望 。Banner 的 构图 大 概 分 为 以 下 几 种 : 
垂直 或 水 平 式 构图 、 三 角形 构图 、 空 间 式 构图 、 框 架 式 构图 和 对 角 线 构图 。 


人 @ Edxkrth 


垂直 式 的 构图 能 够 充分 展示 出 商品 的 特点 ， 具 有 很 强 的 秩序 感 。 水 平 式 的 构图 符 
© 合 人 类 的 阅读 习惯 ,给 人 一 种 稳定 、 和 舒适 的 感觉 。 


| 
h 


通常 ， 这 类 构图 适合 面积 较 小 的 网 。 下 浊 。， 


S| OR 


On Your First Purchose! 


ey fy @) feth 


框架 式 构图 规整 平衡 ， 稳 定 坚固 ， 能 
够 给 用 户 一 种 产品 值得 信赖 、 品 质 可 靠 的 


多 三 角形 构图 二 这 


9, 
三 角形 构图 分 为 正三 角形 和 倒 三 角形 。 SSUREIRSFPORCHASEI 


两 种 , 正三 角形 构图 立体 感 强 , 层次 分 明 ; 2 

倒 三 角形 构图 由 主 到 次 ， 条 理 清晰 ， 有 很 - 50%, 

强 的 运动 感 。 DisCOUNT COUPON 
sz 


a sh 


这 种 构图 是 将 一 个 画面 一 分 为 二 ， 以 
ope 两 种 不 同 的 角度 去 展示 商品 。 这 种 构图 两 
Sami Ia om la9ooa 。 个 版 面 所 占 的 面积 比重 相对 平衡 ,活泼 中 
又 具有 稳定 感 。 


讨 总 壮 涉 司 司 需 L 溃 


@ =the 


空间 式 构 图 是 由 多 个 产品 进行 渐次 式 
排列 ， 利 用 近 大 远 小 的 空间 关系 去 体现 空 


东 豆 疆 字 节 圳 曙 内- 


串 州 手 扎 吊 型 昼 习 


页 配色 的 基本 原则 


色彩 给 人 带 来 的 视觉 效果 非常 明显 ， 一 个 网 站 设计 成 功 与 否 ， 在 某 种 程度 上 取决 


于 设计 者 对 色彩 的 运用 和 搭配 。 选 择 一 个 合适 的 网 页 颜色 ， 不 仅 要 考虑 网 页 的 主题 ， 


还 需要 符合 访客 的 审美 喜好 。 


(1 ) 网 页 配色 需要 具有 特色 。 色 彩 是 对 于 网 页 的 第 一 印象 ， 无 论 是 在 个 人 网 站 还 


是 在 企业 网 站 中 ， 网 页 的 配色 都 应 该 形成 自己 的 风格 ， 从 而 引起 并 加 深 访客 对 网 页 的 


印象 。 一 个 网 页 车 在 配色 上 没有 特色 ， 那 么 它 的 布局 再 巧妙 、 动 画 再 精美 ， 


让 访客 为 之 动心 。 


都 不 足以 


(2 ) 总 体 协 调 ， 局 部 对 比 。 总 体 协 调 ， 局 部 对 比 的 含义 是 整个 网 页 的 
和 谐 、 统 一 的 ， 但 是 ， 在 局 部 可 以 有 一 些 色彩 形成 强烈 的 对 比 。 


(3) 注重 艺术 美感。 网 页 的 配色 不 能 与 艺术 脱轨 。 注 重 艺术 美感 的 配 人 


色彩 应 该 是 


色 方案 ， 不 


仅 能 很 好 地 表达 网 页 的 主 叶 ， 还 能 激发 访客 的 兴趣 ， 让 访客 在 浏览 网 页 的 过 程 中 体验 


到 艺术 和 科技 交融 的 双重 感受 。 


.以 


ADI GOODRICH 


i 网 页 设计 中 要 提高 用 户 体 


身 的 竞争 优势 ， 增 加 网 页 的 回访 率 。 用 户 体验 分 为 感 观 体验 、 交 互 用 户 
户 体验 。 感 官 体验 是 指 呈 现 给 用 户 视听 上 的 体验 ， 本 声音 、 


验 


户 体验 是 指 用 户 在 浏览 、 使 用 网 页 过 程 中 建立 的 感受 ， 好 的 用 户 体验 能 够 提高 


体验 和 情感 
图 像 、 文 字 


内 容 、 网 站 布局 等 方面 呈现 ;交互 体验 是 通过 浏览 、 点 击 、 输 入 等 操作 进 


行 体验 ， 强 


调 交 流 、 互 动 ; 情感 用 户 体验 是 一 种 心理 上 的 体验 ， 强 调 访客 的 心理 认 互 


目 
尽 ， 已 征 史 


高 层次 的 用 户 体验 ， 容 易 让 访客 形成 好 感 和 信赖 感 。 若 想 改善 用 户 体验 ， 可 以 通过 以 
下 几 种 方式 来 做 到 。 
(1) 有 属于 自己 的 风格 。 俗 话说 “人 靠 衣装 马 靠 驳 ”， 网 页 的 配色 、 布 局 是 访客 
对 网 页 的 第 一 印象 ， 所 以 网 页 要 有 属于 自己 的 风格 ， 尽 量 做 到 美观 、 大 方 ， 给 访客 留 
下 好 的 印象 。 

(2 ) 符合 用 户 的 使 用 习惯 。 每 个 人 都 有 不 同 的 使 用 习惯 ， 虽 然 众 口 难 调 ， 但 还 
是 有 规律 可 循 的。 例如 年 轻 人 喜欢 不 拘 一 格 ， 中 年 人 喜欢 严肃 认真 ， 老 年 人 喜欢 中 规 
中 和 矩 。 


(3 ) 内 容 专业 ， 资 源 丰富 。 网 站 的 内 容 是 网 站 的 关键 所 在 ， 是 整个 网 站 的 灵魂 。 
若 要 让 访客 有 最 好 的 用 户 体验 ， 那 么 必须 要 让 访客 找到 自己 想 要 的 资源 。 

(4) 贴心 的 服务 。 现 代 社 会 卖 的 不 单单 是 商品 ， 还 要 卖 服务 。 网 站 也 是 这 样 的 ， 
就 拿 购物 网 站 来 说 ， 通 过 客服 对 商品 的 介绍 ， 能 够 形成 良好 的 口碑 ， 也 给 商品 销售 带 
来 积极 的 影响 。 
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扁平 化 设计 五 大 原则 


扁平 化 的 设计 风格 给 人 一 种 很 简练 、 抽 和 象 、 符 号 化 的 印象 ， 是 网 页 设计 的 一 大 流 
行 趋势 。 不 仅 如 此 ， 扁 平 化 的 设计 还 可 以 提高 速度 。 在 设计 扁平 化 风格 的 网 页 时 ， 可 
以 遵循 以 下 原则 。 

(1) 没有 特效 。 扁 平 化 的 设计 风格 与 拟 物化 的 设计 风格 正好 相反 ， 它 不 需要 阴 
影 、 高 光 、 凸 起 、 玖 化 这 样 的 效果 ， 而 是 通过 简单 的 视觉 语言 去 表达 简练 、 干 脆 的 
效果 。 

(2 ) 简洁 。 扁 平 化 设计 的 一 大 特点 是 直观 、 易 用 ， 它 没有 过 多 繁杂 的 装饰 ， 以 最 
常见 的 图 形 作为 视觉 符号 ， 让 整个 页 面 显得 非常 简洁 。 

(3 ) 注重 版 式 。 扁 平 化 的 设计 要 素 要 求 简单 ， 所 以 就 要 更 注重 版 式 上 的 设计 。 
简洁 的 排版 能 够 增强 易 用 性 和 交互 性 。 


识 癌 壮 涉 司 司 山上 站 


一 


囊 州 半 凌 路 型 涛 于 


击 要 淋 闻 遍 惑 娄 上 日、 


(4) 注重 色彩 。 色 彩 的 使 用 对 于 扁平 化 设计 来 说 非常 重要 ， 在 配色 


择 几 种 纯色 来 搭配 。 


PROMOTIONS 


中 ， 通 常会 选 


About us WhatWeDo OurWork TheBuz ContactUs Shop Blog 


是 比 


的 注 


过 模糊 的 志 


字 更 容易 让 人 再 


) 采用 真实 的 背景 图 片 。 
用 真实 图 片 作为 背景 的 前 提 ， 是 这 个 图 像 必 须 请 晰 且 


E 解 其 中 的 含义 ， 采 月 


Vd -给 


(2) 采 
模糊 的 图 片 并 不 是 图 片 的 像素 质量 不 好 ， 而 是 通过 一 定 的 技术 手段 使 
景 ， 能 够 以 虚实 尖 纪 风 且 汉 将 二 当 中 的 内 会 利 托 国 站。 


给 多 


模糊 的 背景 。 


日 真实 图 


片 作为 背景 ， 


往往 更 


能 够 引 


有 代表 性 。 图 像 的 特点 
起 访客 


[= 里 


其 模糊 。 通 


(3 ) 采用 纯色 。 
扁平 化 的 设计 风格 通常 会 采用 纯色 作为 背景 ,大 面积 的 纯色 总 是 会 给 人 一 种 清晰 、 
纯粹 的 感觉 。 采 用 纯色 作为 背景 时 ， 通 常会 利用 色彩 的 饱和 度 和 对 比 度 来 形成 对 比 ， 


从 而 获得 优美 的 视觉 效果 。 


) 图 案 和 纹理 。 
采用 图 案 和 纹理 作为 背 统 
的 背景 既 能 让 网 页 内 容 变 


村， 通常 会 选择 内 容 细致 但 不 抢眼 的 图 案 或 纹理 。 这 样 
， 又 不 会 喧 宾 夺 主 。 
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